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 |
もっといろいろあるけど、いらないんじゃないか?ってね。
あまり使わないセレクタを使っていると見通しが悪くなるだけ。
スポンサーリンク