cssセレクターまとめ

1 *

* {
margin: 0;
padding: 0;
}

全称セレクタ。テスト用としてはいいが、本番では使わない方が良い。全ての要素を対象にするため、ブラウザに負担をかける。

#container * {
border: 1px solid black;
}
子セレクタにも使えるが、使用しない方が良い。

2 #X

#container {
width: 960px;
margin: auto;
}

id指定。その要素にidを指定する必要があるか考える必要あり。

3 .X

.error {
color: red;
}
クラス指定。

4 X Y

li a {
text-decoration: none;
}

子孫セレクタ。X Y Z A B.errorのようになっているのは間違い。

5 X

a { color: red; }
ul { margin-left: 0; }

型セレクター。全ての要素を指定する時使用する。

6 X:visited X:link

a:link { color: red; }
a:visted { color: purple; }

疑似クラスセレクタ。

8 X > Y

div#container > ul {
border: 1px solid black;
}

標準のXYとX> Yの違いは、後者は直接の子のみを選択する。

• List Item
  
  • Child
• List Item
• List Item
• List Item

この場合、#container直下のulのみ対象になる。それ以外のulには適用されない。


9 X ~ Y

ul ~ p {
color: red;
}

この例ではul以後のp要素全てを対象にする。

10 X[title]

a[title] {
color: green;
}

属性セレクタ。この例ではタイトル属性を持つaのみ対象になる。

11 X[href="foo"]

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}

例では、http://net.tutsplus.comにリンクする全てのaタグを対象にする。
他のアンカータグは影響を受けない。

12 X[href*="nettuts"]

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

正規表現で指定できる。文字列の先頭と末尾を参照するには、^および＆を使用します。

13 X[href^="http"]


a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

この場合httpで始まるurlへのリンクを持つaタグ。
http://を探していないことに注意してください。それは不要だし、https://で始まるURLを考慮しません。

14 X[href$="jpg"]

a[href$=".jpg"] {
color: red;
}

.jpgで終わるリンクを持つaタグ

15 X[data-*="foo"]

a[data-filetype="image"] {
color: red;
}

リンク先のデータタイプが画像のものを指定している。
色々な画像形式のリンクを指定する時、

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

このようにするのは効率が悪い。そういう時に使う。
使用する場合は、要素にdata-filetype属性を指定する。
data-filetype属性のない物には適用されない。

Image Link

16 X[foo~ = "bar"]

a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}

" Click Me, Fool

external属性を持つ要素はcolor:redになり、externalとimage両方を持つ要素はcolor:redと border: 1px solid black;
の両方を持つことができる。