CSSの組み合わせセレクタ

2018年2月26日

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

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

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

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

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

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

[例]

#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;
}