CSSに慣れてくるとわけがわからなくなるセレクタ


スポンサーリンク

CSSになれてくると、結構高度なCSSを読むようになる。
そうなると頭の中でごっちゃになる セレクタ。

つまり、ターゲットにしたい場所を指定する方法だね。

「なんとか」ってタグと同じスタイルにしたいけど、どう書けばいいんだ?とかね。



要素名[属性名] 特定の属性を持つ要素
タグ[属性名] 指定属性を持つ要素 a[target] {color:blue;} a タグ
タグ[属性名=”属性”] 指定属性の特定設定値を持つ要素 a[target=”_blank”] {color:blue;} target で _blank をしている a タグ
タグ[属性名^=”属性”] 指定属性の特定設定値を持つ要素(前方一致) a[class^=”bLink”] {color:blue;} a タグで class が bLink で始まるもの
要素 , 要素 複数のセレクタ h1, h2 {color:blue;} h1 も h2 も
要素 要素 下の階層の要素 p strong {color:blue;} pタグの内側の strong
要素 > 要素 直下の階層の要素 p > strong {color:blue;} p の次に来る strong
要素 + 要素 直後に隣接している要素 h1 + p {color:blue;} h1 の直後の p
要素 – 要素 同階層の後続要素 p – span p の後の span

もっといろいろあるけど、いらないんじゃないか?ってね。

あまり使わないセレクタを使っていると見通しが悪くなるだけ。

スポンサーリンク