Web Survive

Webで生きる道を模索するブログ

セレクタについて

スタイルの適用対象を決めるのが「セレクタ」です。
セレクタの種類や特徴をきちんと理解することが、
効率的なCSS制作の第一歩になります。

セレクタの種類

CSSで利用できるセレクタのなかでも、
特に使用頻度の高いものは次のとおりです。

ユニバーサルセレクタ(*)

セレクタにアスタリスク(*)を指定すると、
すべての要素にスタイルが適用されます。
全称(ぜんしょう)セレクタとも呼ばれます。

タイプセレクタ(E)

要素名のセレクタです。
その要素すべてにスタイルが適用されます。
たとえば「body」や「p」と指定します。

子孫セレクタ(F)

要素の中の子孫要素にスタイルを適用するセレクタです。
スペース区切りでセレクタをつなぎます。
たとえば「div p」と指定した場合、
「div」に子孫要素として含まれる「p」に適用されます。
「div p em span」と適用対象を絞り込むこともできます。

E

要素名のセレクタを「E」と表現することがあります。
これはElementに由来しています。

名前

セレクタ

意味

ユニバーサルセレクタ

*

すべての要素

*{color: #00000;}

タイプセレクタ

E

その要素(E)

p { color:#22222;}

子孫セレクタ

E F

親要素(E)に含まれる子孫要素(F)

p em {color:#cc0000}

子セレクタ

E > F

親要素(E)に含まれる直接の子要素(F)

p > em {color:#cc0000}

隣接セレクタ

E + F

兄要素(E)の直後の弟要素(F)

h1 + p {color:#222222;}

クラスセレクタ

.classname

class属性値が「classname」の要素

.note {color: #ff0000}

IDセレクタ

#idname

id属性値が「idname」の要素

#header {color:#006600;}

属性セレクタ

E[after]

要素(E)がその属性(after)をもつ場合

input[type] {padding: 2px;}

E[after=”value”]

要素(E)が

その属性(after)と値(value)をもつ場合

input[type=”text”]{padding: 2px;}

E[after~=”value”]

要素(E)がその属性を持ち、

属性値が空白文字区切りで複数指定されており、

その属性値(value)が含まれている場合

p[class~=”mobeto”]{color=”000066;”}

E[after|=”value”]

要素(E)がその属性をもち、

属性値がハイフン区切りで複数指定されており、

その属性値(value)が前方一致で含まれている場合

div[lang|=”en”]{font-size:small;}

クラスセレクタ(.classname)

class属性でそのクラス名が指定された要素にスタイルを適用します。
たとえば「.articles」は、「class=”articles”」が指定された要素に適用されます。
要素名(タイプセレクタ)をつけて「div.articles」と書くこともできますが、
この場合はdiv要素のなかで「class=”articles”」が指定されたものに限定されます。

複数のクラスが指定された要素にスタイルを適用するために、
「articles.jhon」と書く事ができます。
この場合、「class=”articles.john”」や「class=”articles john monthly”」が指定されている要素にスタイルが適用されます。

IDセレクタ(#idname)

id属性で、そのID名が指定された要素にスタイルを適用します。
たとえば「#header」は、「id=”header”」が指定された要素に適用されます。
要素名(タイプセレクタ)をつけて「div#header」と書くこともできますが、
この場合はdiv要素で「id=”header”」が指定されたもの、という意味になります。

疑似クラス・疑似要素の種類

疑似クラス・疑似要素は特殊なセレクタであり、
要素名や属性名、属性値を手がかりにスタイルを適用するのではなく、
「現状」や「状態」(カーソルオンにしたり、要素の1文字目など)をもとに適用します。
これが「疑似」(英語では「pseudo」)という名前の由来であり、
スタイルを適用するための指定がHTMLに現れない、という特徴があります。

疑似クラス・疑似要素のなかでも、特に使用頻度の高いものは次のとおりです。

リンク疑似クラス(:link/:visited)

未訪問リンクのときにスタイルを適用する「:link」
既訪問リンクのときに適用する「:visited」があります。
基本的にアンカー(a要素)で利用する疑似クラスです。

ダイナミック疑似クラス(:hover/focus/active)

要素がカーソルオンされたときにスタイルを適用する「:hover」(ホバー)、
フォーカスされたとき(選択状態になった場合など)に適用する「:focus」
アクティブになったとき(クリック後に何らかのアクションを行っている場合など)に適用する「:active」があります。

:link、:visited、:hover、:focus、:activeをa要素に適用

css-selector-link

指定順序

リンク疑似クラスとダイナミック疑似クラスを一緒に利用する場合、
指定順序に注意しましょう。
たとえばアンカー(a要素)に指定する場合、ユーザーによるアクションの順序
(:link、:visited、:hover、:focus、:active)にする必要があります。

:first-letter疑似要素(:first-letter)

要素の1文字目のみにスタイルを適用するのが「:first-letter」です。
たとえば、段落(p要素)の1文字目だけ大きく目立たせ、後続のテキストを回り込ませるのに利用します。
(このような視覚効果は「ドロップキャップ」や「イニシャルキャップ」と呼ばれます)。

:berfore/:after疑似要素(:before/:after)

要素の前後に何らかの内容を生成するためには、「:before」「:after」を利用します。
どちらもcontentプロパティで生成内容を指定します。
たとえば「p.note:before{content:”注意!”;}」というスタイルでは、
「class=”note”」と指定されたp要素の直前に、「注意!」というテキストが生成されることになります。

名前

セレクタ

意味

リンク疑似クラス

:link

未訪問リンクのとき

 a:link {color: #000080;}
 ダイナミック疑似クラス  :visited  既訪問リンクのとき  a:visited {color: #800080;}
 :hover  要素がカーソルオンされたとき

a:hover {color: #ff0000;}

 :focus  要素がフォーカスされたとき

a:focus {color: #ff0000;}

 :active

要素がアクティブになったとき

 a:active {color: #ff0000;}
 言語疑似クラス  :lang()  要素にその言語コードが指定されているとき  div:lang(en){ fontsize: small;}
 :first-child疑似クラス  :first-child

要素のなかの最初の子要素

 div:first-child{font-style:italic;}
 :first-line疑似要素  :first-line  要素の1行目のみ  p:first-line{font-weight:bold;}
 :first-letter疑似要素

:first-letter

 要素の1文字目のみ  h2:first-letter {font-size:large;}

:before/:after疑似要素

:before

 要素の直前に内容を生成  #main:before {content:”本文ここから”;}

:after

要素の直後に内容を生成

 #main:after{content:”本文ここから”;}

セレクタの組み合わせ

セレクタは組み合わせて利用できます、
たとえば「#header h1」と指定した場合、
「id=”header”」に子孫要素として含まれるh1要素にスタイルが適用できます。
実務的には、このような構造を示すIDやクラスをもとに、
子孫セレクタでスタイルの適用対象を絞り込む方法が非常によく使われます。

コンテンツ範囲を示すID名やクラス名をもとに、子孫セレクタでスタイルを適用

クラスや疑似クラスを利用した、やや複雑な子孫セレクタの例をみてみましょう。

やや複雑な子孫セレクタの例

IDセレクタやクラスセレクタ、タイプセレクタ、
疑似クラスが混在した書き方になっていますが、
HTMLのツリー構造(要素の親子関係)をきちんと理解しておけば、
このように最小のIDやクラスだけでスタイルが適用できます。

IDやクラスを安易に追加してしまいがちですが、
増えれば増えるだけ管理しづらくなります。
IDやクラスに頼るのではなく、
子孫セレクタを使ってスタイルの適用対象を絞り込むのが
効率的なCSS制作に不可欠です。

なお、構造を示すIDやクラスでは、
タイプセレクタ(要素名)をつけないことも多いです。
たとえば、「h1、h2、h3」と指定した場合、
同じスタイルがh1要素、h2要素、h3要素それぞれに適用されます。
最後のセレクタにはカンマをつかないようにしてください。

セレクタをカンマ区切りでグループ化

子孫セレクタを利用している場合など、長いセレクタをグループ化するときは、
カンマごとに改行すると見やすいでしょう、

長いセレクタをグループ化するときは、カンマごとに改行すると見やすくなる