【CSS】セレクタの書き方・種類一覧

セレクタとは？

CSSは次の書き方で書くことができます。

セレクタ {プロパティ : 値;｝

セレクタは「要素」を、プロパティは要素の「性質」を、値は「どの状態にするか」を指定します。セレクタにはいくつかの種類があります。

要素名で指定する（タイプセレクタ）

これが一番シンプルですね。

<h1>
サンプル
</h1>

h1{
  font-size:30px;
}

全てに適用させる（ユニバーサルセレクタ）

「*」が全ての要素を指します。

*{
  font-size:30px;
}

id属性を指定する（IDセレクタ－）

id属性をセレクタとして使用したい場合には次のように書きます。

<h1 id ="title">
サンプル
</h1>

#title{
  font-size:30px;
}

class属性を指定する（クラスセレクタ－）

class属性をセレクタとして使用する場合には次のように書きます。

<h1 class ="title">
サンプル
</h1>

.title{
  font-size:30px;
}

属性セレクタ－で指定する

もしくは次のようにも書くことができます。内容は全く同じです。「~」を忘れないようにしましょう。

[class~="title"]{
  font-size:30px;
}

なぜ「~」が必要なの？

先ほど書いた[class~=”title”]は属性セレクタ－という指定の仕方です。これはクラスだけに限らず、他の属性でも使用することができます。

/* title 属性を持つ <a> 要素 */
a[title] {
		color: purple;
}

[class=”○○”]だと１つの値しか指定することができませんが、「~」があると[class~=”○○ △△”]と複数の値を指定できます。また、この複数の値のうち、１つが一致していれば適用されます。

疑似クラスで指定する

CSSには疑似クラスというものが用意されています。疑似クラスは、その要素が「ある状態」という条件を与えます。

<p class ="name">
わたしの名前は<a href="#">太郎</a>です。
</p>

/* :linkはまだ見ていないリンクを指定します */
a:link{
  color:red;

/* :visitedはすでに見たリンクを指定します*/
a:visited{
  color:blue;
}

疑似要素で指定する

疑似クラスはタグで囲まれた範囲を扱いました。しかし、疑似要素はタグとは関係なく指定することができるものがあります。書き方は疑似クラスと一緒です。

下の:first-letterでは、h1の1文字目だけを赤に指定します。

<h1 class ="name">
サンプル
</h1>

h1:first-letter{
  color:red
}

複数の種類のセレクタを合わせる

セレクタは複数を同時に指定することもできます。下のコードでは適用されるのは上の「サンプル」だけです。#containerを持たない下の「サンプル」の色は変わりません。

<div id = "container">
<h1 class ="name">
サンプル
</h1>
</div>

<h1 class ="name">
サンプル
</h1>

#container .name{
  color:red;
}

ちなみに次のCSSでは機能しません。セレクタは階層順に正確に書く必要があります。


.name　#container{
  color:red;
}

結合子を使ったセレクタの組み合わせ方

セレクタは単純に半角スペースで並べるだけではなく、結合子と呼ばれる記号を使って意味を持たせることができます。

A B	AとBの間は半角スペース。セレクタAで選択される要素の子孫に、セレクタBを適用する。
A>B	セレクタAで選択される直接の子要素に、セレクタBを適用する。
A+B	セレクタAで選択される要素の直後に現れる要素に、セレクタBを適用する。

文章ではとても分かりづらいので実際の例を見てみましょう。次のようなＣＳＳがあったとします。

#food p { }　・・・１
#food>p { } ・・・2
#food h1+p { }　・・・３
/*「・・・数字」はCSSではありません。*//

<!-- 「←1…」はHTMLではありません -->
<div id="food">
    <h1>食べ物</h1>
    <p>うどん</p> ← 1、2、3
    <p>そば</p> ← 1、2
    <div class="drink">
        <p>野菜ジュース</p> ← 1
    </div>
</div>

どのセレクタが、どの要素に適用されるかイメージがつきやすいですね。