Web筋トレも使っているサーバー!ロリポップを使ってみない?

css3の勉強~その5~疑似クラス

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

コメントを残す

メールアドレスが公開されることはありません。