九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。
仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。
実務でもよく使われるものには記述例を載せていますので、参考にしてください。
CSS3で追加されたセレクタと擬似クラスまとめ
属性セレクタ
属性で設定した値に関するセレクタです。
E[Attr^=”val”]
- セレクタ［属性＾＝”値”］
- Attr属性の値がvalで始まるセレクタに適用する。
【例】リンクの属性がhttpを含む（外部リンク）場合のみ背景画像を設定する。
A[href^="http"]{
background:url(image/gaibu.png) no-repeat left center;
}
E[Attr$=”val”]
- セレクタ［属性＄＝”値”］
- Attr属性の値がvalで終わるセレクタに適用する。
【例】リンクの属性がPDFで終わる場合に背景画像を設定する
A[href$="pdf"]{
background:url(image/pdf.png) no-repeat left center;
}
E[Attr*=”val”]
- セレクタ［属性*＝”値”］
- Attr属性の値がvalを含むセレクタに適用する。
【例】リンクの属性にligという文字を含む場合のみ背景画像を設定する。
A[href*="lig"]{
background:url(image/lig_page.png) no-repeat left center;
}構造疑似クラス
単体セレクタや子孫セレクタなどでは表現できないものを選択できるようにする疑似クラスです。
E:last-child
- 要素:last-child
- 最後の子である要素に適用する。リストボックスなどのデザインに役立つ擬似クラスです。
【例】リスト要素の最後のみ線を引かない
li:last-child{
border:0;
}
E:first-of-type
- 要素:first-of-type
- 最初の要素に適用する。
E:last-of-type
- 要素:last-of-type
- 最後の要素に適用する。
E:only-child
- 要素:only-child
- 唯一の子である要素に適用する。
E:only-of-type
- 要素:only-of-type
- 唯一の要素に適用する。
E:nth-child(n)
- 要素:nth-child(n)
- 最初からn番目の子である要素に適用する。nth-child(2n)と指定すると2の倍数の要素に適応されます。ブロックレイアウトの整列などに役立つ便利な擬似クラスです。
【例】3番目のli要素にだけ背景色を設定する
ul li:nth-child(3){
background:#336699;
}
E:nth-last-child(n)
- 要素:nth-last-child(n)
- 最後からn番目の子である要素に適用する。
E:nth-of-type(n)
- 要素:nth-of-type(n)
- 最初からn番目の要素に適用する。:nth-childと同じような働きをしますが、対象が兄弟関係にあるn番目の要素になります。
E:nth-last-of-type(n)
- 要素:nth-last-of-type(n)
- 最後からn番目の要素に適用する。
E:root
- 要素:root
- ルート要素である要素に適用する。
E:empty
- 要素:empty
- 空の要素に適用する。不要なタグを作ってしまった場合やムダな<div>の対策に。
【例】何も入っていないdiv要素を非表示にする
div:empty{
display:none;
}ターゲット疑似クラス
ターゲット要素に適用される疑似クラスです。
E:target
- 要素:target
- URLが参照したターゲットとなる要素に適用する。E:targetはフラグメントIDが対象となります
UI要素状態擬似クラス
ユーザーインターフェイスに関する疑似クラスです。
E:enabled
- 要素:enabled
- 有効な状態の要素に適用する。選択している部分などをわかりやすく表示できます。
E:disabled
- 要素:disabled
- 無効な状態の要素に適用する。
E:checked
- 要素:checked
- チェックされた状態のチェックボックスやラジオボタンに適用する。選択している場所がわかりやすくアクセシビリティの向上に役立ちます。
【例】チェックされた状態のラジオボタンを太字にする
input[type="radio"]:checked + label{
font-weight:bold;
}否定疑似クラス
指定されたクラス以外の要素に適用される擬似クラスです。
E:not(~)
- 要素:not(~)
- 指定した条件に一致しない要素に適用する。ブラウザのデフォルト指定（liのマークなど）を活かしたい場合の指定が楽になります。
まとめ
使いこなせるようになると、今まで数行にわたっていた入力の負担がぐっと減りそうですね！今後追加される可能性を考慮して、早い段階で使いこなせるようにマスターしちゃいましょう。
ではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
