こんな要素があります
divに囲まれたpタグ達
<div>
<p>要素１</p>
<p>要素２</p>
<p>要素３</p>
<p>要素４</p>
<p>要素５</p>
</div>
nth系の擬似クラスを使う
特定要素配下の最初か最後の要素を指定して、スタイルを付けることができます。
/* div直下の最初 */
div > p:first-child {
background: yellow;
}
/* div直下の最後 */
div > p:last-child {
background: tomato;
}
偶数要素と奇数要素のみにスタイルを付与するには、
/* 偶数（even） */
p:nth-child(even) {
background-color: skyblue;
}
/* 奇数（odd） */
p:nth-child(odd) {
background-color: skyblue;
}
奇数の方を適用させたらこんな感じになります。
基本的な :nth-child(3) のように順番を使用するパターンに加え、
下記のように、３番目から７番目、みたいなこともできます。
p:nth-child(n+3):nth-child(-n+7)
[ ] かくかっこ を使う
[ ] は属性をあらわすセレクタで、^ を $ にすると「指定した文字列で終わる」、 ＊ にすると「指定した文字列が含まれている。という意味になります。
body > [class*="btn"] {
display: none;
}
クラスに btn という文字列を含む要素全て。
↧