[CSS]CSSセレクタの書き方基本の「き」(CSS3対応)

August 15, 2017Code

CSS構文って人によって書き方が異なりますよね。
チームで動くとなるとある程度フレームワークを用意するわけですが、何気なく使っている指示出しが意外と浸透していないこともあるので基本に立ち返って整理してみました。

そもそも論としてのCSSの基本の書き方は以下


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

セレクタとは、CSSの指定先。
プロパティは規定された効果のグループ名
値はその名の通り、効果をどれだけ与えるか。
という基本を頭に入れて順次みていきましょう。

セレクタの基本指示方法

まずは基礎中の基礎から見ていきます。


/* ユニバーサルセレクタ(* 以下の要素全てに適用) */
* { プロパティ: 値; }

/* タイプセレクタ(特定要素に適用) */
要素名 { プロパティ: 値; }

/* クラスセレクタ(指定クラス要素に適用) */
.クラス名 { プロパティ: 値; }

/* IDセレクタ(指定ID要素に適用) */
.ID名 { プロパティ: 値; }

こいつらを組み合わせることでもう少し細かい指定も可能です。


/* クラス名を持つ要素に適用 */
要素名.クラス名 { プロパティ: 値; }

/* ID名を持つ要素に適用 */
要素名.クラス名 { プロパティ: 値; }

更に細かく見ていきましょう。CSSでは、要素と要素の位置関係から適用対象を細かく振り分けることができます。


/* 子孫セレクタ(親要素Aに内包される子要素Bに適用) */
要素名A 要素B { プロパティ: 値; }

/* 子セレクタ(親要素Aの直下にある子要素Bに適用) */
要素名A>要素B { プロパティ: 値; }

/* 隣接兄弟セレクタ(要素Aに隣接する要素Bに適用) */
要素名A+要素B { プロパティ: 値; }

/* 一般兄弟セレクタ(要素Aより後に位置する要素Bに適用) */
要素名A~要素B { プロパティ: 値; }

次に属性情報を認識させて指示を変更する場合。
ここでの属性情報とは、hreftargetdata-attrといったものに当たります。


/* B属性を持つAに適用 */
A[B] { プロパティ: 値; }
a[target] { プロパティ: 値; }

/* Cという値を持ったB属性を持つAに適用 */
A[B="C"] { プロパティ: 値; }
a[target="_blank"] { プロパティ: 値; }

/* Cという文字列から始まるB属性を持つAに適用 */
A[B^="C"] { プロパティ: 値; }
a[href^="http://"] { プロパティ: 値; }

/* Cという文字列で終わるB属性を持つAに適用 */
A[B$="C"] { プロパティ: 値; }
a[href$="co.jp"] { プロパティ: 値; }

/* Cという文字列を含むB属性を持つAに適用 */
A[B*="C"] { プロパティ: 値; }
A[data-attr*="text"] { プロパティ: 値; }

以上です。
特に属性情報を絡めたあたりの指示などは、見覚えがないと一体何を意味しているのかわからないと思うので、よくよく理解を進めておくと良いかと。