TECH BLOG

マークリープス技術ブログ

open

css ○○番目系疑似クラスの指定パターンまとめ

MARKLEAPS

よく使うけどついつい忘れがちな
○○番目系疑似クラスの使い方をまとめました。

最初

:first-child

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

最後

:last-child

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

奇数番目

:nth-child(odd)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

偶数番目

:nth-child(even)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

X番目

:nth-child(X)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

最後からX番目

:nth-last-child(X)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

Xの倍数

:nth-child(Xn)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

:nth-child(2n)で指定した場合
2番目、4番目、6番目～
:nth-child(3n)で指定した場合
3番目、6番目、9番目～
に適用されます。
1行に3枚ずつ画像が並ぶリストなど、使える場面がかなり多いです。

最初からX番目まで

:nth-child(-n+X)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

:nth-child(-n+3) と指定した場合、
上から3番目までの要素全部にスタイルを適用します。

新着記事の最初の3件に「new」の文字を表示させたい時などに使えます。

最後からX番目まで

:nth-last-child(-n+X)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

:nth-last-child(-n+3) と指定した場合、
最後から3番目までの要素全部にスタイルを適用します。

最後からX番目まで

:nth-last-child(-n+X)

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

:nth-last-child(-n+3) と指定した場合、
最後から3番目までの要素全部にスタイルを適用します。

親要素内で兄弟関係にある要素でn番目

:nth-of-type(X)

<table>
<tr>
<th>項目</th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
<td>内容</td>
</tr>
</table>

table表でtdの最初の要素にのみスタイルを指定したい時等に使えます。

よく読まれている関連記事

関連最新記事