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