CSS 自分の備忘録

セレクタの使い方

h1 , p { color: skyblue; }

同じスタイルを複数のセレクタで使う場合。とてもうまい以外に適用。

div span { color: skyblue; }

Divの下にある階層のspan全て。はやいととてもうまいに適用。

div > span { color: skyblue; }

Divの直下にあるspanだけ。とてもうまいに適用。

p + p { color: skyblue; }

pの次にくるp要素。なのでp p pとあると、２つめと3つ目のpが該当する。やすいとはやいに適用。

p.points { color: skyblue; }

p要素でなおかつpoinstsクラスの場合。はやいに適用。

今回はaタグだが、inputタグのtype属性が最もよく使われる。

a[title] { color: skyblue; }

aタグの内、タイトル属性があるものを対象とする。Yahoo。

a[href="http://google.com"] { color: skyblue; }

href属性の値がgoogleのみ対象となる。

a[clsss~="search"] { color: orange; }

Yahooだけが適用される。~=を使うこと。