CSS3で追加になったセレクタを改めて見直してみる
みなさん、こんにちは、まーしーです。
すこしずつHTML5やCSS3を使ったWebサイトが増えてきていますね。
今日はCSS3で追加になったセレクタを見直してみたいと思います。
Web Designers' Browser Support Checklist, Web Designers' Browser Support Checklist : FindMeByIP
http://www.findmebyip.com/litmus
にのっているものを見てみましょう。一覧はこんな感じです。
- CSS3: Begins with
- CSS3: Ends with
- CSS3: Matches
- CSS3: Root
- CSS3: nth-child
- CSS3: nth-last-child
- CSS3: nth-of-type
- CSS3: nth-last-of-type
- CSS3: last-child
- CSS3: first-of-type
- CSS3: last-of-type
- CSS3: only-child
- CSS3: only-of-type
- CSS3: empty
- CSS3: target
- CSS3: enabled
- CSS3: disabled
- CSS3: checked
- CSS3: not
- CSS3: General Sibling
CSS3: Begins with
E[foo^="bar"]{ }
よくこんなかんじでかかれますが、属性fooがbarからはじまる属性値をもつものに対してスタイルを指定。
CSS3: Ends with
E[foo$="bar"]{ }
よくこんな感じで書かれます。属性fooがbarで終わる属性値をもつものに対してスタイルを指定します。
CSS3: Matches
E[foo*="bar"]{ }
良くこんな感じで書かれます。属性fooの属性値にbarが含まれているものに対してスタイルを指定します。
CSS3: Root
E:root{ }
良くこんな感じで書かれます。ルートです。(X)HTMLだとhtml要素がルートということになりますが、html要素にスタイルを指定します。
CSS3: nth-child
E:nth-child(n){ }
こんな感じで書かれます。n番目の子要素Eに対してスタイルを指定します。
nのところは2nとすれば偶数番目ですし、evenも同様です。oddや3n+1などなども可能です。
CSS3: nth-last-child
E:nth-last-child(n){ }
こんなかんじで書かれますが、nth-childとの違いは後ろからn番目、ということですね。その要素にスタイルを指定します。
CSS3: nth-of-type
E:nth-of-type(n){ }
こんな感じで書かれます。要素Eの兄弟関係にあるもののうちn番目の要素にスタイルを指定します。
CSS3: nth-last-of-type
E:nth-last-of-type(n){ }
こんな感じで書かれます。おわかりかと思いますが、兄弟関係にある物のうち、後ろからn番目の要素、ということですね。
CSS3: last-child
E:last-child{ }
このような感じでかかれますね。最後の子要素Eに対してスタイルを指定します。
CSS3: first-of-type
E:first-of-type{ }
このような感じで書かれます。nth-of-type,nth-last-of-typeと似てるのでわかるかと思いますが、兄弟関係にあるもののうち最初の要素、ということですね。
CSS3: last-of-type
E:last-of-type{ }
このような感じで書かれます。兄弟関係にあるもののうち最後の要素、ということですね。
CSS3: only-child
E:only-child{ }
このような感じで書かれます。兄弟関係の要素がない子要素にスタイルを指定します
CSS3: only-of-type
E:only-of-type{ }
このような感じで書かれます。親要素に対して唯一の要素Eに対してスタイルを指定します。
CSS3: empty
E:empty{ }
このような感じで書かれます。要素Eのうち子要素をもたないものにスタイルを指定します。
CSS3: target
E:target{ }
このような感じでかかれます。アンカーで飛んだ先の要素にスタイルを指定します。
CSS3: enabled
E:enabled{ }
このような感じで書かれます。要素のスタイルが有効になっている状態の時にスタイルを指定します。
CSS3: disabled
E:disabled{ }
このような感じで書かれます。要素のスタイルが無効になっている状態の時にスタイルを指定します。
CSS3: checked
E:checked{ }
このような感じで書かれます。まぁイメージはわくかと思いますが、radioボタン、checkboxのチェックが入ったときにスタイルを指定します。
CSS3: not
E:not(s){ }
このような感じで書かれます。notですからsとは一致しないものに対してスタイルを指定します。sの部分は属性を指定したりすることが可能です。
CSS3: General Sibling
E ~ F{ }
このように書かれます。要素Eの後に表れる要素F（＝弟要素）に対してスタイルを指定します。
ということで
結構ありますね。これらが使えるようになると結構便利です。
Web Designers' Browser Support Checklist, Web Designers' Browser Support Checklist : FindMeByIP
http://www.findmebyip.com/litmus
をみると使えるブラウザも増えてきています。使えそうなときは積極的に使っていきたいですね。
参考リンク
- Selectors Level 3
http://www.w3.org/TR/css3-selectors/#selectors - セレクタ｜CSS HappyLife ZERO
http://css-happylifezero.com/selectors/
