最初の要素、最後の要素
<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