こんにちは、戸井です。
CSSコーディングを行う上で、セレクタを自由自在に使いこなすと効率よく作業を進めることができます。
一部ではありますが、使用頻度の高いセレクタの使い方をお伝えいたします。
属性セレクタ[属性=”値”]
下記のHTMLを例に見ていきましょう。
<p class="hoge">たまご</p> <p class="hoge-abc">ひよこ</p> <p class="abc def hoge">にわとり</p>
■class属性が「hoge」を含む場合[class*=”hoge”]
[class*="hoge"]{color:red;}
[class*=”hoge”]という書き方は[hoge]という文字列を含むclass属性を持つ要素に対してスタイルを適応させることができます。
■class属性が「hoge」から始まる場合[class^=”hoge”]
[class^="hoge"]{color:red;}
[class^=”hoge”]という書き方は「hoge」から始まる文字列のclass属性を持つ要素に対してスタイルを適応させることができます。
■class属性が「hoge」で終わる場合[class$=”hoge”]
[class$="hoge"]{color:red;}
[class$=”hoge”]という書き方「hoge」で終わる文字列のclass属性を持つ要素に対してスタイルを適応させます。
構造擬似クラス
構造擬似クラスの中でも使用頻度の高い「:〇〇-child」や「:〇〇-of-type」についてお伝えいたします。
<dl class="profile"> <dt>名前</dt> <dd>山口花子</dd> <dt>誕生日</dt> <dd>12月2日</dd> <dt>干支</dt> <dd>とら</dd> <dt>血液型</dt> <dd>O型</dd> </dl>
■「:first-child」と「:last-child」
.profile :first-child{color:red;}
.profile :last-child{color:blue;}
「:first-child」と「:last-child」は同階層にある全要素の中の「最初の要素」と「最後の要素」にスタイルを適用します。上記例では.profileの子要素の中で最初の要素である<dt>名前</dt>と、最後の要素である<dd>O型</dd>にスタイルが適応されます。
■「:first-of-type」と「:last-of-type」
.profile dd:first-of-type{color:red;}
.profile dt:last-of-type{color:blue;}
「:first-of-type」と「:last-of-type」は同階層にある同じ要素の中の「最初の同じ要素」と「最後の同じ要素」にスタイルを適応します。上記例では.profileの子要素で、dd要素の中で最初の要素である<dd>山口花子</dd>と、dt要素の中で最後の要素である<dt>血液型</dt>にスタイルが適応されます。
■「:nth-child(x)」と「:nth-last-child(x)」
同階層にある全要素の中で:nth-child(x)は「最初から数えてx番目の要素」、:nth-last-child(x)は「最後から数えてx番目の要素」を表します。これらのセレクタは非常に汎用性が高く、xの部分には数値だけではなく、奇数を表す「odd」や偶数を表す「even」などを代入できます。他にも、倍数で適応する要素を指定することができ、その場合は「n」を使用します。例えば、3の倍数(3、6、9…)番目の要素にスタイルを適応する場合は「3n」と指定します。
まとめ
いかがだったでしょうか？
覚えておくと作業が一層はかどりますので、ぜひ活用してみてください。
