実践でよく使う擬似クラスなどのセレクタまとめ（自分用メモ）

動的な実装を行う際は、HTMLの改修やパーツの使い回しが良く発生しますので、できる限りHTMLは統一させておきたいものです。
そんな時に擬似クラスはめちゃくちゃ使えますね！！
Web業界にすでに15年近くいるので、ie6やie7を非対応にしてよくなり擬似クラスが使えるようになった時には感動ものでした。。。
擬似クラスの種類もすごく増えました。正直覚えきれません。。。
でも実践でよく使う擬似クラスだけでも覚えておけばかなり便利なので、私がよく使う擬似クラスを自分用メモとしてまとめました。

以下のデモページから確認できます

DEMO

1、隣接セレクタ(E + F)

要素と要素が直接隣接している場合に適応されます。
間に動的要素などが入ってしまうと適応されませんので、システム実装する際に擦り合わせておくこと

HTML

<p class="demo01-01">隣接セレクタE</p>
<div class="demo01-02"><p>隣接セレクタE</p></div>

CSS

.demo01-01 + .demo01-02{
  margin-top: 30px;
}

2、子セレクタ (E > F)

親要素の直接の子要素に適用されます。

HTML

<div class="demo02-01">
  <p class="demo02-02">子セレクタF</p>
</div>

CSS

.demo02-01>.demo02-02 {
  font-weight: bold;
}

3、間接セレクタ (E ~ F)

親要素が同じになる兄弟関係の弟に適用されるセレクタです。
隣接セレクタと違い間に他の要素が入っていても適応されます。こちらの方が応用が効きますね。

HTML

<p class="demo03-02">ここは赤くならない</p>
<p class="demo03-01">間接セレクタE</p>
<p class="demo03-02">ここは赤くなる</p>
<div>
  <p class="demo03-02">ここは赤くならない</p>
</div>

CSS

.demo03-01~.demo03-02 {
  color: red;
}

4、:first-child, :last-child, :only-child

要素内の最初（最後・ひとつ）に書かれている子要素にスタイルが適用されます。

:first-childの場合

HTML

<div class="demo04-01 mb-15">
  <p>ここが赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo04-01 p:first-child {
  color: red;
}

:last-childの場合

HTML

<div class="demo04-02 mb-15">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここが赤くなります</p>
</div>

CSS

.demo04-02 p:last-child {
  color: red;
}

:only-childの場合

HTML

<div class="demo04-03">
  <p>ここが赤くなります</p>
</div>

CSS

.demo04-03 p:only-child {
  color: red;
}

5、:first-of-type, :last-of-type, :only-of-type

要素の同じ子要素の最初（最後・ひとつ）の要素にスタイルを適用します。

:first-childと:first-of-typeの違い

包括している要素の中での順番の数え方が異なります。

:first-of-typeの場合

HTML

<div class="demo05-01">
  <span>先頭にpタグがなくても適応します</span>
  <p>ここが赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo05-01 p:first-of-type {
  color: red;
}

:last-of-typeの場合

HTML

<div class="demo05-02 mb-15">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここが赤くなります</p>
  <span>最後尾にpタグがなくても適応します</span>
</div>

CSS

.demo05-02 p:last-of-type {
  color: red;
}

:only-childの場合

HTML

<div class="demo05-03">
  <span>pタグ以外には適応されません</span>
  <p>ここが赤くなります</p>
  <span>pタグ以外には適応されません</span>
</div>

CSS

.demo05-03 p:only-of-type {
  color: red;
}

奇数番目に適用

6、:nth-child(odd)

要素の隣接している子要素の奇数番目の要素に適用します。

HTML

<div class="demo06-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo06-01 p:nth-child(odd) {
  color: red;
}

7、:nth-of-type(odd)

要素の同じ子要素の奇数番目の要素に適用します。

HTML

<div class="demo07-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo07-01 p:nth-of-type(odd) {
  color: red;
}

偶数番目に適応

8、:nth-child(even)

要素の隣接している子要素の偶数番目の要素に適用します。

HTML

<div class="demo08-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo08-01 p:nth-child(even) {
  color: red;
}

9、:nth-of-type(even)

要素の同じ子要素の偶数番目の要素に適用します。

HTML

<div class="demo09-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo09-01 p:nth-of-type(even) {
  color: red;
}

n番目に適応

10、:nth-child(n)

要素の隣接している子要素のn番目の要素に適用します。

HTML

<div class="demo10-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo10-01 p:nth-child(3) {
  color: red;
}

11、:nth-of-type(n)

要素の同じ子要素のn番目の要素に適用します。

HTML

<div class="demo11-01">
  <p>ここは赤くなりません</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo11-01 p:nth-of-type(3) {
  color: red;
}

3番目以降に適応

12、:nth-child(n+3)

要素の隣接している子要素の3番目以降の要素に適用します。

HTML

<div class="demo12-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo12-01 p:nth-child(n+3) {
  color: red;
}

13、:nth-of-type(n+3)

要素の同じ子要素の3番目以降の要素に適用します。

HTML

<div class="demo13-01">
  <p>ここは赤くなりません</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo13-01 p:nth-of-type(n+3) {
  color: red;
}

上から3番目までに適応

14、:nth-child(-n+3)

要素の隣接している子要素の上から3番目までの要素に適用します。

HTML

<div class="demo14-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo14-01 p:nth-child(-n+3) {
  color: red;
}

15、:nth-of-type(-n+3)

要素の同じ子要素の上から3番目までの要素に適用します。

HTML

<div class="demo15-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo15-01 p:nth-of-type(-n+3) {
  color: red;
}

下からn番目に適応

16、:nth-last-child(n)

要素の隣接している子要素の下からn番目の要素に適用します。

HTML

<div class="demo16-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo16-01 p:nth-last-child(3) {
  color: red;
}

17、:nth-last-of-type(n)

要素の同じ子要素の下からn番目の要素に適用します。

HTML

<div class="demo17-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo17-01 p:nth-last-of-type(3) {
  color: red;
}

下から3番目以前の要素に適応

18、:nth-last-child(n+3)

要素の隣接している子要素の下から3番目以前の要素に適用します。

HTML

<div class="demo18-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo18-01 p:nth-last-child(n+3) {
  color: red;
}

19、:nth-last-of-type(n+3)

要素の同じ子要素の下から3番目以前の要素に適用します。

HTML

<div class="demo19-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo19-01 p:nth-last-of-type(n+3) {
  color: red;
}

下から3番目までの要素に適応

20、:nth-last-child(-n+3)

要素の隣接している子要素の下から3番目までの要素に適用します。

HTML

<div class="demo20-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo20-01 p:nth-last-child(-n+3) {
  color: red;
}

21、:nth-last-of-type(-n+3)

要素の同じ子要素の下から3番目までの要素に適用します。

HTML

<div class="demo21-01">
  <p>ここは赤くなりません</p>
  <p>ここは赤くなりません</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
</div>

CSS

.demo21-01 p:nth-last-of-type(-n+3) {
  color: red;
}

最後以外の要素に適応

22、:not(:last-child)

要素の隣接している子要素の最後以外の要素に適用します。

HTML

<div class="demo22-01">
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo22-01 p:not(:last-child) {
  color: red;
}

23、:not(:last-of-type)

要素の同じ子要素の最後以外の要素に適用します。

HTML

<div class="demo23-01">
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <span>pタグ以外には適応されません</span>
  <p>ここは赤くなります</p>
  <p>ここは赤くなりません</p>
</div>

CSS

.demo23-01 p:not(:last-of-type) {
  color: red;
}