cssのセレクタ指定方法をまとめてみました。

contents

  1. ○ > * 特定の要素の直下の要素を指定
  2. ○ + ○ 隣接している要素を指定
  3. ○ ~ ○ 後に続く要素を指定
  4. 特定の属性を含むセレクタを指定

「○ > *」特定の要素の直下の要素を指定

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

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を含む場合
}