スマホ対策に!CSS3追加セレクタと疑似クラスの書き方サンプル

村上 奈美


スマホ対策に!CSS3追加セレクタと疑似クラスの書き方サンプル

九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。

仕事で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のマークなど)を活かしたい場合の指定が楽になります。

まとめ

使いこなせるようになると、今まで数行にわたっていた入力の負担がぐっと減りそうですね!今後追加される可能性を考慮して、早い段階で使いこなせるようにマスターしちゃいましょう。

ではまた!

村上 奈美
この記事を書いた人
村上 奈美

外部ライター 九州

この記事を読んだ人におすすめ