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

Contents

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

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

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

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

「○ + ○」隣接している要素を指定

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

「○ ~ ○」後に続く要素を指定

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

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

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

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

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

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