CSSセレクタとは?

HTMLドキュメントでCSSスタイルを使用するには、スタイルをどの要素に減らすかを選択する必要があります.
CSSの選択者は、スタイルをどのHTML要素に適用するかを示す要素です.

*(すべて選択)-すべての要素を選択します。

* {
  color: red;
}

上のCSSコードは、ドキュメント内のすべての要素にcolor:red属性を付与します.

タグ名(タグセレクタ)-タグ名の要素を選択します。

li {
  color: red;
}

上記CSSコードは、文書にliと表記されている要素に適用されます.

.クラス名(クラスセレクタ)-クラス名のタグを持つ要素を選択します。

--------------------------------HTML--------------------------------------
<div class="box"></div>
--------------------------------CSS---------------------------------------
.box {
  width: 100px;
  height: 100px;
  color: orange;
}

上記CSSコードは、文書内のクラス名boxの要素に適用されます.

#ID名（ID選択者）－ID名が同じ要素を選択します。

--------------------------------HTML--------------------------------------
<div id="box"></div>
--------------------------------CSS---------------------------------------
#box {
  width: 100px;
  height: 100px;
  color: orange;
}

上記CSSコードは、文書中のIDがboxの要素に適用されます.

選択者1選択者2(複合選択者)-選択者1と選択者2を同時に満たす要素を選択します。

--------------------------------HTML--------------------------------------
<div class="box"></div> 1번
<span class="box"></span> 2번
--------------------------------CSS---------------------------------------
div.box {
  width: 100px;
  height: 100px;
  color: orange;
}

上記CSSコードは、divタグを有し、クラス名がboxの最初の要素に適用されます.

選択者1>選択者2(サブ選択者)選択者1のサブエレメント選択者2

--------------------------------HTML--------------------------------------
  <ul class="list">
    <li class="item1">1</li> 1
    <li class="item2">2</li> 2
    <li class="item3">3</li> 3
  </ul>
  <ul class="list2">
    <li class="item1">1</li> 4
    <li class="item2">2</li> 5
    <li class="item3">3</li> 6
  </ul>
--------------------------------CSS---------------------------------------
.list > item1 {
  color: red;
}

スタイルは、親クラス名がlistで、クラス名がitem 1の最初の要素に適用されます.

[選択者1][選択者2](サブ選択者)[選択者1]を選択した[サブエレメント選択者2]

--------------------------------HTML--------------------------------------
  <ul class="list">
    <li class="item">1</li> 1
    <li class="item">2</li> 2
    <li class="item">3</li> 3
  </ul>
  <ul class="list2">
    <li class="item1">1</li> 4
    <li class="item2">2</li> 5
    <li class="item3">3</li> 6
  </ul>
--------------------------------CSS---------------------------------------
.list item {
  color: red;
}

Listセレクタのサブエレメントでは、クラス名itemのエレメントは1番2番3番であるため、スタイルは1番2番3番にのみ適用されます.

選択者1+選択者2選択者1の次の兄弟要素のうち、選択者2を満たす最初の要素

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li class="red">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
--------------------------------CSS---------------------------------------
.red + li {
  color: blue
}

クラス名redと呼ばれる要素の次の兄弟要素では、最初の要素の値が3なので、3番目の色はblueです.

選択者1~選択者2選択者1のすべての後続兄弟要素。

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li class="red">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
--------------------------------CSS---------------------------------------
.red ~ li {
  color: blue
}

クラス名redの要素の次の兄弟要素は3番4番5番であるため、3番4番5番の色は青になります.

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

選択者が特定のステータスを持つ時間を指定します.たとえば、特定のセレクタがフォーカスされている場合、マウスカーソルが上昇している場合、いくつかの要素である場合などです.

選択プログラム1:hover-選択プログラム1の要素にマウスカーソルを合わせたときに選択

--------------------------------HTML--------------------------------------
<a href="https://www.google.com/">구글</a>
--------------------------------CSS---------------------------------------
a:hover {
  color: green;
}

マウスカーソルがaラベルにぶら下がっている場合、フォントは緑に変わります.

選択プログラム1:active-選択プログラム1要素をマウスクリックして選択

--------------------------------HTML--------------------------------------
<a href="https://www.google.com/">구글</a>
--------------------------------CSS---------------------------------------
a:active {
  color: green;
}

aラベルでマウスをクリックすると、フォントが緑に変わります.

選択者1:focus-選択者要素がフォーカスされて選択

--------------------------------HTML--------------------------------------
<input type="text" />
--------------------------------CSS---------------------------------------
input:focus {
  background-color: green;
}

Input要素に値を入力すると、背景色が緑に変わります.

選択者:first-schild選択者兄弟要素の最初の選択

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  --------------------------------CSS---------------------------------------
  ul li:first-child {
    color: red
  }

ulのサブエレメントliの1つ目は1を加えたliです.そのため1のフォントは赤になります.

選択者:last-child選択者は兄弟要素の中で最も小さい

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  --------------------------------CSS---------------------------------------
  ul li:last-child {
    color: red
  }

ulのサブエレメントliの最後の5が選択され、赤になります.

選択者:n回-child(n)選択者要素のn番目の要素を選択

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  --------------------------------CSS---------------------------------------
  ul li:nth-child(3) {
    color: red
  }

ulのサブエレメントで3番目のliエレメントを選択します.

nh-child(n)の応用

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  --------------------------------CSS---------------------------------------
  ul li:nth-child(2n) {
    color: blue
  }
  
  ul li:nth-child(2n + 1) {
    color: red
  }
  
  ul li:nth-child(n + 2) {
    color: orange
  }
  
  ul li:nth-child(-n + 3) {
    color: green
  }

()にnがある場合、nは0から始まると考えられ、順次増加する.
最初のスタイルは0 2 4 6...このように成長する.
2つ目のスタイルは1 3 5 7...このように増加します.
3つ目のスタイルは2 3 4 5...
4つ目のスタイルは3 2 1...
特定のルールのある子供を一度に選ぶのに適しています.

選択要素1:not(選択者2)選択者2ではなく選択者1

--------------------------------HTML--------------------------------------
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="test">3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  --------------------------------CSS---------------------------------------
  li:not(.test) {
    color: red
  }

1 2 4 5が選択され、色が変わります.

セレクタ要素の内側の前に内容を挿入:before

セレクタ要素の内部:after-コンテンツの挿入

--------------------------------HTML--------------------------------------
  <div class="box">
    안녕!
  </div>
  --------------------------------CSS---------------------------------------
.box::before {
    content: "나는 앞에!";
}

.box::after {
  content: "나는 뒤에!";
}

属性属性を含む要素を選択

属性=値属性で同じ値を持つ要素を選択

--------------------------------HTML--------------------------------------
  <input type="text">
  <input type="password" />
  <input type="text" disabled />
  --------------------------------CSS---------------------------------------
[type] {
  background-color: orangered;
}


[disabled] {
  background-color: orange;
}


[type="password"] {
  background-color: orchid;
}