Sponser Link
目次
first-child、last-child、nth-child
first-child 最初の要素を指定
last-child 最後の要素を指定
nth-child 何番目の要素を指定
[html] <ul><li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
[/html] [css] li:last-child { backgrand:violet;}最後に～
li:nth-child(3) { backgrand:violet;} 3番目に～
li:nth-child(odd) { backgrand:violet;} 奇数番目に～
li:nth-child(even) { backgrand:violet;} 偶数番目に～
li:nth-child(3n+1) { backgrand:violet;} n＝自然数、1,4,7,10
li:nth-last-child(4) { backgrand:violet;} 最後から数えて4番目に～
li:only-child { backgrand:violet;} 子要素が1つしかないliに～
[/css]
nth-of-type
何番目の要素かを指定するための擬似クラスについてさらに見ていきます。
[html] <section><h1>title</h1>
<p>hello</p>
<p>hello</p>
<h2>title</h2>
<p>hello</p>
<p>hello</p>
</section>
[/html] [css] p:first-of-type{ backgrand:violet;}最初のpが～
p:last-of-type{ backgrand:violet;}最後のpが～
p:nth-of-type(3){ backgrand:violet;}3番目のpが～
p:nth-last-of-type(4){ backgrand:violet;}最後から数えて4番目のp
h2:only-of-type{ backgrand:violet;}唯一のh2が～
[/css]
否定の疑似クラス、空の疑似クラス、フォーム、隣接セレクタ
[css] li:not(.target){ backgrand:violet;}.target以外のliに～li:empty{ backgrand:violet;}内容が空のliに～
input[type=”text”]:enabled{ backgrand:violet;}
input[type=”text”]:disabled{ backgrand:violet;}
input[type=”checkbox”]:checked + label { backgrand:violet;}
チェックボックスがチェックされたら、それに隣接するラベルの背景を変える
[/css]
Sponser Link