CSSセレクタと結合子

概要

今回は，CSSセレクタについて説明していきます．

CSSセレクタとは

CSSセレクタは，CSSの適用範囲を定義する方法です．実は今までもこのCSSセレクタというものの力を借りてきています．

いままで，.cssという拡張子を持ったCSSファイルに，.クラス名{プロパティ: 値}という形で記述してきたと思います．この.クラス名の部分に当たるのが，CSSセレクタと呼ばれるものです．ここの記述を変えることによって，CSSの適用範囲を定義してあげることができます．ちなみに，.クラス名というCSSセレクタは，その「クラス名」をもつ要素全てをCSSの適用範囲にしています．

CSSセレクタ一覧

全称セレクタ

構文: *
別名「ユニバーサルセレクタ」とも呼ばれます．このセレクタは，全ての要素を選択します．ですから，例えば次のように書いた場合は，対象のHTMLファイルの全ての要素に対して，スタイルを適用することができます．

*{
    margin: 0;
}

ただし，この全称セレクタはあまり用いない方が良いと言われています．というのも，ブラウザのレンダリング（描写）が遅くなったり，良いデフォルトのCSSをリセットをしてしまうといった問題があるからです．とりあえずは，全称セレクタは用いない方が良いでしょう．

要素型セレクタ

構文： elementname
指定されたタグ名をもつすべての要素を選択します．例えば，h2の要素全てにスタイルを適用したいというときは，

h2{
    background-color: red;
}

といったように書きます．

クラスセレクタ

構文: .classname
指定されたクラス名をもつすべての要素を選択します．これは，今まで最も使用してきたセレクタです．

IDセレクタ

構文: #idname
id属性の値に基づいて要素を選択します．IDは必ず一意に付けなければならないため，これを用いると，必ず一つの要素のみを指定します．

例

#toc{
    background-color: red;
}

属性セレクタ

構文: [attr]
指定された属性を持つ要素をすべて選択します．このセレクタは少し奇抜です．まず，属性というものを思い出してみてください．属性とは，タグの中（<と>の間）に記述して詳細を設定するものです．例えば，

<img src="/images/grapefruit">
<img src="/images/apple" alt="林檎の画像">
<img src="/images/pear" alt="梨の画像">

というのであれば，一つ目のimg要素はsrc属性を持っている，二つ目・三つ目の要素はsrc属性とalt属性を持っているということができます．ですから，属性セレクタを使って

[alt]{
    width: 50px;
}

のように指定すると，1番目の要素だけCSSが適用されていない状態になります（2番目と3番目の要素だけCSSが適用されます）．

小まとめ（CSSセレクタ）

グループ化セレクタ

構文: A, B
このような記法をすると，AとBの両方の要素を選択します．例えば，

div, [alt]{
    background-color: red;
    margin: 0;
}

と記述すれば，div要素と，alt属性を持つ要素に対して中身のプロパティの内容を反映させることができます．

結合子

結合子は，上で述べたCSSセレクタ同士に関係性を指定することによって，より複雑にCSSの適用範囲を決めることを可能にします．

子孫結合子

（空白）結合子は，第一の要素（下でいうA）の子孫に当たるノードを選択します．
構文: A B

AとBにはCSSセレクタ（上記参照）がきます．.classnameだったり，[attr]だったりです．

ここで，子孫とは，ある要素があった時に，その中の要素ということです．例えば，

<div class="wrapper">
    <div class="top">
        <h2>
    <div>
</div>

の場合は，h2はwrapperクラスを持つdiv要素の子孫です．また，topクラスを持つdiv要素もwrapperクラスを持つdiv要素の子孫だと言えます．ですから，

.wrapper h2{
    background-color: red;
}

と指定すると，wrapperクラスを持つdiv要素の孫要素のh2要素を選択することができます．ただh2を選択するよりも範囲が狭まっていることを頭の中で確認してみてください．

小結合子

>結合子は，第一の要素の直接の子に当たるノードを選択します． 構文: A > B

勘が言い方だと気付いているかもしれませんが，直接の子というのは，ある要素の中の一番上の階層にいる要素です．

一般兄弟結合子

~結合子は兄弟を選択します．つまり，第2の要素が第1の要素の後にあり，両者が同じ親を持つ場合です．
構文: A ~ B

つまり，BがAの後にあり，両者が同じ親を持つ場合ということです．例えば，p ~ spanは<p>要素の後にある兄弟の<spam>要素をすべて選択するということです．

隣接兄弟演算子

+演算子は隣接する兄弟を選択します．つまり，第2の要素が第1の要素の直後にあり，両者が同じ親をもつ場合です．
構文: A + B

例えば，h2 + pは，<h2>要素のすぐ後に続く<p>要素を指定します．

小まとめ

課題

なし