CSS3のセレクタは幾つもありますよね。
今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。
Contents
E:first-child
親要素の最初の子要素であるE要素に適用
E:first-of-type
兄弟関係にある最初のE要素に適用
E:first-childとE:first-of-typeの違いとサンプル
CSS
div.sample1 p:first-child {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample1 h2:first-of-type {
color:rgba(204,0,0,1);
}HTML
<div class="sample1">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<p>p要素4</p>
</div>デモ
p要素1
p要素2
h2要素1
p要素3
p要素4
E:last-child
親要素の最後の子要素であるE要素に適用
E:last-of-type
兄弟関係にある最後のE要素に適用
E:last-childとE:last-of-typeの違いとサンプル
CSS
div.sample2 p:last-child {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample2 h2:last-of-type {
color:rgba(204,0,0,1);
}HTML
<div class="sample2">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<p>p要素4</p>
</div>デモ
p要素1
p要素2
h2要素1
p要素3
p要素4
E:nth-child(n)
親要素のn番目の子要素であるE要素に適用
E:nth-of-type(n)
兄弟関係にあるn番目のE要素に適用
※補足
E:nth-child(n)とE:nth-of-type(n)のnの部分は、oddや2n+1で奇数を表し、evenや2nで偶数を表すこともできます。
E:nth-child(n)とE:nth-of-type(n)の違いとサンプル
CSS
div.sample3 p:nth-child(2n) {
background-color:rgba(51,51,51,1);
color:rgba(255,255,255,1);
}
div.sample3 h2:nth-of-type(odd) {
color:rgba(204,0,0,1);
}HTML
<div class="sample3">
<p>p要素1</p>
<p>p要素2</p>
<h2>h2要素1</h2>
<p>p要素3</p>
<h2>h2要素2</h2>
<p>p要素4</p>
<p>p要素5</p>
<p>p要素6</p>
<h2>h2要素3</h2>
<p>p要素7</p>
<p>p要素8</p>
</div>デモ
p要素1
p要素2
h2要素1
p要素3
h2要素2
p要素4
p要素5
p要素6
h2要素3
p要素7
p要素8
いかがでしたか？
擬似クラスを使いこなせばIDセレクタやクラスセレクタ等を使わなくてもスタイルの適用が可能です！綺麗なソースになりそうですね！
他にも便利な擬似クラスやセレクタがありますが、また次回ご紹介したいと思います。