CSSの組み合わせセレクタ

CSSで指示できるセレクタを組み合わせて指示する方法です。

セレクタ組み合わせの種類

[セレクタ組み合わせ一覧]

セレクタ名称HTMLCSS用途
シンプルセレクタ要素 or id属性 or class属性要素 or #id名 or .クラス名単一のセレクタ指定。
グループセレクタ複数のセレクタ,でつなぐ。複数のセレクタを一括指定。
子孫セレクタ親子孫関係のセレクタ親要素から順に半角スペースで区切る親子孫関係で絞り込みした指定。親孫の指定もOK。
子セレクタ<ul>
<li></li>
</ul>
ul > li親要素ul直下の子要素liを指定する。
隣接セレクタ<h2>
<p></p>
</h2>
h2 + p要素h2に隣接する要素pを指定する。

シンプルセレクタ

シンプルセレクタについては下記を参照下さい。

CSSのセレクタ

グループセレクタ

セレクタ同士を「,(カンマ)」区切りで並べると複数のセレクタに対して同じプロパティの指定ができます。

[例]

#nav01,#nav02,#nav03,#nav04,#nav05,#nav06 {
    color: #FF0000;
}

子孫セレクタ

セレクタ同士を半角スペースで空けて並べると絞り込んだ指定ができます。

要素が親子関係であれば「親要素」⇒「子要素」⇒「孫要素」と絞り込む形で指定することができます。また、「親要素」⇒「孫要素」といった形で中間要素の「子要素」を省略して記述することも可能です。

[例]

ul li {
    font-size: 13px;
}

グループセレクタとの組み合わせも可能です。

#nav01 ul li,
#nav03 ul li,
#nav05 ul li {
    color: #00FF00;
}

子セレクタ

セレクタ同士の間に「>(半角の大なり)」区切りで並べた絞り込み指定です。

子孫セレクタと似ていますが直下の要素を指定する場合に使用します。子孫セレクタは子々孫々の関係まで指定が反映されてしまいますのでそれを避けたい場合はこちらを使います。

ul > li {
    font-size: 13px;
}

隣接セレクタ

セレクタ同士の間に「+」区切りで並べた絞り込み指定です。

隣接している要素に対して指定することができます。下記はh2要素と隣接しているp要素のみmargin-topを5pxにする例です。

[例]

h2 + p {
    margin-top: 5px;
}