セレクタ
CSSセレクタ
CSSを適用するHTML要素をブラウザに伝えるもの
マッチする要素すべてにCSSを適用する
任意の要素にマッチする
div, p, a etc
.class1
*.class1の省略形
#id1
*#id1の省略形
tag[attr]
attr属性をもつtagタグにマッチ
[attr]
*[attr]の省略形？
tag[attr="attr1"]
attr属性がattr1に一致するtagタグにマッチ
tag[attr~="attr1"]
attr属性がattr1を含むtagタグにマッチ
tag[lang|="en"]
lang属性がenまたはen-から始まる値(en-usなど)のtagタグにマッチ
一般的にlang属性で使用
tag[attr^="attr1"]
attr属性の値がattr1で始まるtagタグにマッチ
tag[attr$="attr1"]
attr属性がattr1で終わるtagタグにマッチ
tag[attr*="attr1"]
attr属性がattr1を含むtagタグにマッチ
tag[attr1="attr1_"][attr2="attr2_"]
attr1属性がattr1_に、attr2属性がattr2_に一致するtagタグにマッチ
複数のセレクタを組み合わせる
.class1,.class2
class1クラスまたはclass2クラスにマッチ
.class1.s1
class1 s1クラスにマッチ
親div1クラスの子孫class1クラスにマッチ
親div1クラスの直接の子class1クラスにマッチ
兄class1クラスの直後にある同じ親をもつ弟class2クラスにマッチ
兄class1クラスの後にある同じ親をもつ弟class2クラスにマッチ
参考