擬似クラス

最初の要素、最後の要素

<ul class="list1">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>
.list1 li:first-child {
  color: red;
}
.list1 li:last-child {
  color: blue;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

:nth-of-type

<ul class="list2">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>
.list2 li:nth-of-type(2) {
  color: red;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

:nth-child

<ul class="list3">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
  <li>リスト7</li>
</ul>
.list3 li:nth-child(2n) {
  color: red;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6
  • リスト7

奇数、偶数

<ul class="list4">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>
.list4 li:nth-child(even) {
  color: red;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

:not()

<ul class="list5">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>
.list5 li:not(:last-child) {
  color: red;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

:is

<ul class="list6">
  <li class="daikichi">リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li class="kichi">リスト5</li>
</ul>
.daikichi,
.kichi {
color: red;
}

↓↓↓↓↓↓

:is(.daikichi, .kichi) {
  color: red;
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です