LAMPインフルエンサーマーケティングマネジメントマーケティング人事戦略ビジネススキル採用情報メディア掲載情報ニュースリリースイベント情報Web制作スマホ対策に!CSS3追加セレクタと疑似クラスの書き方サンプル2014.03.20スマホ対策に!CSS3追加セレクタと疑似クラスの書き方サンプル村上2014.03.20Web制作シェア九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。実務でもよく使われるものには記述例を載せていますので、参考にしてください。CSS3で追加されたセレクタと擬似クラスまとめ属性セレクタ構造疑似クラスターゲット疑似クラスUI要素状態疑似クラス否定擬似クラス属性セレクタ属性で設定した値に関するセレクタです。E[Attr^=”val”]セレクタ[属性^=”値”]Attr属性の値がvalで始まるセレクタに適用する。【例】リンクの属性がhttpを含む(外部リンク)場合のみ背景画像を設定する。center;}E[Attr$=”val”]セレクタ[属性$=”値”]Attr属性の値がvalで終わるセレクタに適用する。center;}E[Attr*=”val”]セレクタ[属性*=”値”]Attr属性の値がvalを含むセレクタに適用する。【例】リンクの属性にligという文字を含む場合のみ背景画像を設定する。}構造疑似クラス単体セレクタや子孫セレクタなどでは表現できないものを選択できるようにする疑似クラスです。E:last-child要素: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の倍数の要素に適応されます。ブロックレイアウトの整列などに役立つ便利な擬似クラスです。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>の対策に。display:none;}ターゲット疑似クラスターゲット要素に適用される疑似クラスです。E:target要素:targetURLが参照したターゲットとなる要素に適用する。E:targetはフラグメントIDが対象となりますUI要素状態擬似クラスユーザーインターフェイスに関する疑似クラスです。E:enabled要素:enabled有効な状態の要素に適用する。選択している部分などをわかりやすく表示できます。E:disabled要素:disabled無効な状態の要素に適用する。E:checked要素:checkedチェックされた状態のチェックボックスやラジオボタンに適用する。選択している場所がわかりやすくアクセシビリティの向上に役立ちます。font-weight:bold;}否定疑似クラス指定されたクラス以外の要素に適用される擬似クラスです。E:not(~)要素:not(~)指定した条件に一致しない要素に適用する。ブラウザのデフォルト指定(liのマークなど)を活かしたい場合の指定が楽になります。まとめ使いこなせるようになると、今まで数行にわたっていた入力の負担がぐっと減りそうですね!今後追加される可能性を考慮して、早い段階で使いこなせるようにマスターしちゃいましょう。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。