【CSS】セレクタの指定方法

CSSでは、特定のHTML要素にスタイルを適用するために「セレクタ」を使用します。セレクタを適切に指定することで、効率的にデザインを適用できます。今回は、CSSのセレクタの基本的名使い方をまとめていきたいと思います。

目次非表示

特定の要素の直下の要素を指定
隣接している要素を指定
後に続く要素を指定
特定の属性を含むセレクタを指定

特定の要素の直下の要素を指定

特定の要素の直下の要素を指定できます。

CSS

#main > *  {
  /* #main直下の全ての要素に適用される */
}

隣接している要素を指定

隣接している要素を指定する場合は、以下のように指定します。

CSS

h2 + p {
  /* h2要素と隣接しているp要素に適用される */
}

後に続く要素を指定

特定の要素の後に続く要素に対して適応させたい場合は、以下のように指定します。

CSS

h2 ~ p {
  /* h2要素の後に続くp要素に適用される */
}

特定の属性を含むセレクタを指定

CSS

div[id^="box"] { /* セレクタ名の前方一致 */
  /* box というid名から始まるdiv要素を指定 */
}

p[class$="text"] { /* セレクタ名の後方一致　*/
  /* textというclass名で終わるp要素を指定 */
}

div[class*="img"] { /* セレクタ名の部分一致 */
  /* imgというclass名を含むdiv要素を指定 */
}

a[href*="/css"] {　/*　セレクタ名の部分一致 */
  /* パスに/cssを含む場合 */
}