TIL 07|CS-03(セレクタ2)

22127 ワード
CSS テキストリンク
CSSセレクタとしての仮想クラスセレクタ、仮想要素セレクタ、属性セレクタについて

バーチャルクラスセレクタ


CSSは、「動作」を制御する仮想クラスセレクタも提供します.

Hoverセレクタ

  • [ABC:hover]:マウスカーソルがセレクタABC要素にぶら下がっている場合、
    • を選択します.
  • コード
    •   <style>
.box {
    width:100px;
    height:100px;
    background-color:orange;
    transition:1s;
    }

.box:hover{
    width:300px;
    background-color:royalblue;
    }
 </style>
</head>
<body>
  <div class="box">
  </div>
</body>
  • とは、マウスカーソルがオレンジ色のbox要素にぶら下がるとき、横300 px、色がroyalblue box、1秒以内に変化(動作)
    • を意味する.

    アクティブセレクタ

  • [ABC:active]:選択者ABC要素をマウスクリックしたときに
    • を選択
  • コード
    •   <a href="www.naver.com" src="네이버">네이버</a>
  <style>
a.active{
  color:red;
}
 </style>
</head>
<body>
</body>
  • 出力画面:naverリンクをクリックすると
    • 赤になります.

    フォーカスセレクタ

  • [ABC:Focus]:選択者ABC要素が焦点の場合、
    • を選択
  • プロパティ:Focusになる要素はHTMLインタラクティブコンテンツです.(input,A,button,label,selectなど)また,HTMLインタラクティブコンテンツ要素でなくてもtab index属性を用いた要素が焦点となる.
    • は、ある要素に焦点を当てる役割を果たす概念です.
  • 例
    • <input type="text"> 

input:focus{
	background-color:orange;
          }

    first-Child

  • [ABC:first-child]:選択者ABCが兄弟要素の1番目である場合、
    • を選択する
  • コード
    • <style>
.fruits span(하위선택자,fruit가 class인 tag의 자식요소인 span tag):first-child{
		color:red;
        }
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>
</body>
  • 出力画面

    • last-Child

  • [ABC:last-child]:選択者ABCが兄弟要素の末っ子である場合、
    • を選択
  • コード
    • <style>
.fruits span:last-child{
		color:red;
        }
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
</div>
</body>
  • 出力画面

    • Nth-Child

  • [ABC:nth-child(n)]:選択者ABCが同級要素の(n)番目の場合、
  • n 0から(2 n:0、2、4...)
  • コード
    • <style>
.fruits *(전체 자식 tag):nth-child(2){
		color:red;
        }
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
</div>
</body>

  • 出力画面


  • 偶数選択:フルーツ*:nth-child(2 n)

  • 奇数第2選択:フルーツ*:nth-child(2 n+1)

  • 2番目の要素から(選択):フルーツ*:nth-child(n+2)

    • 否定選択者

  • [ABC:not(xyz)]:非選択方XYZのABC要素
    • を選択
  • コード
    • <style>
.fruits div:not(span){
		color:red;
        }
</style>
</head>
<body>
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
</div>
</body>

    仮想要素セレクタ


    仮想要素セレクタ=仮想タグセレクタ(ブレンド)

    beforeセレクタ

  • [ABC::before]:選択者ABC要素の内部の前にコンテンツを挿入します.

    • ポストセレクタ

  • [ABC::afth]:選択者ABC要素の内部の後ろにコンテンツを挿入します.
    • ::before,:afterセレクタにはcontentプロパティが空であってもcontentプロパティが含まれている必要があります.

    属性セレクタ


    属性名を持つセレクタ

    [ABC]


    つまり
  • :属性ABCを含む要素
    • を選択する
  • コード:属性がdisabledの要素を選択し、色を赤に設定します.
    ex> <input type="text" value="Sharon" disabled>

[disabled]{
	color:red;
    }
  • は、通常のプロパティの検索には適用されません.typeをプロパティとするすべての要素
    • が見つかります.
    ex> <input type="text" value="Sharon" disabled>
    <input type="password" value="1234">
    <input type="text" value="ABCD">

[type]{
	color:red;
    }

    [ABC="XYZ"]


    つまり
  • :属性ABCを含む値XYZの要素
    • を選択する.
  • コード:属性タイプを含むABCDの値を持つ要素
    • を選択する.
    ex> <input type="text" value="Sharon" disabled>
    <input type="password" value="1234">
    <input type="text" value="ABCD">

[type="ABCD"]{
	color:red;
    }
    バッファスクロール
    [アルゴリズム]プログラマ-2つの並列番号を抽出(JavaScript)