CSS3で追加されたセレクタ

CSS3で追加されたセレクタ

今回より複数回にわたりCSS3につきまして、記載していこうと思います。

という事で、それでは今回はッ、

上記について記載していこうと思います…。
まずは、CSS2.1との違いを少しご説明！

CSS3では要素の属性や状態などで選択できる新しいセレクタなどが加わったことで、例えば段ごとに背景色を設定するような指定など、CSS2.1には備わっていなかった高度なセレクタの組み合わせが可能になりました。HTMLの構造がシンプルになり、CSSの肥大化も抑えることができるようになります。

セレクタ

CSSのスタイルは以前ご紹介いたしましたとおり、、「セレクタ｛プロパティ：値；｝」のようにセレクタを使って適用します。

セレクタには、タイプセレクタやユニバーサルセレクタ、クラスセレクタ、IDセレクタ、属性セレクタ、子孫セレクタ、子セレクタ、隣接セレクタ、間接セレクタ、疑似セレクタ、疑似要素などがあります。CSS3では、「Selectors Level3」というモジュールで新しいセレクタが定義されていて、他にも「テキスト・フォント」、「レイアウトデザイン」、「エフェクト」などの機能別にモジュールが用意されています。

「Selectors Level3」参考リンク

機能別カテゴリとCSS3のモジュール

CSS3で追加された属性セレクタ

属性セレクタは、要素の属性とその属性の値をもとに、対象を選択するセレクタです。

E[foo^=”bar”]
foo（属性名）で指定した値が、”bar”ではじまる場合に適用されます。

E[foo$=”bar”]

foo（属性名）で指定した値が、”bar”で終わる場合に適用されます。

E[foo*=”bar”]

foo（属性名）で指定した値が、”bar”が含まれる場合に適用されます。

CSS3で追加された主な疑似セレクタ

疑似クラスは、各要素の状態によって選択するセレクタです。各要素が特定に条件を満たした状態のときに、スタイルを適用します。主な疑似クラスの記述方法をいかに記載します。

E:root

ルート要素（HTMLではhtml要素）に適用されます。

E:nth-child(n)

同じ親要素を持つ兄弟の要素で、前から何番目もしくは奇数・偶数番目の要素に適用されます。たとえば「2n+1」の場合は、前から1番目（2×0+1＝1）、3番目（2×1+1＝3）、5番目（2×2+1＝5）のように、奇数番目の要素が対象になります。「odd」も奇数番目に適用します。偶数番目は「even」を使います。

・例1：奇数行の要素に適用

・例2：偶数行の要素に適用

E:nth-last-child(n)

同じ親要素を持つ兄弟の要素で、後ろから何番目もしくは奇数・偶数番目の要素に適用されます。

・例1：後ろから奇数行の要素に適用

・例2：後ろから偶数行の要素に適用

E:nth-of-type(n)

同じ親要素を持つ同一の要素で、前から何番目もしくは奇数・偶数番目の要素に適用されます。記述例の場合、「img」が指定されていますので、同じ親要素を持つ兄弟の要素の中で、img要素だけが対象になります。

E:nth-last-of-type(n)

同じ親要素を持つ同一の要素で、後ろから何番目もしくは奇数・偶数番目の要素に適用されます。

疑似クラスの一覧

CSS3で追加されたターゲット疑似クラス

アンカーリンクの対象となる要素に適用する疑似クラスが「ターゲット疑似クラス」です。

リンクのターゲットに適用されます。たとえば、「<p id=”note”>クリック</a>」のようにID属性を記述しておけば、「<a href=”#note”>クリック</a>」のテキストリンクをクリックすると、p要素にスタイルの指定が適用されます。

このほかに、UI要素（ラジオボタンやチェックボックスなど）の状態を判断して適用する「UI要素状態疑似クラス」、指定したセレクタ以外のセレクタに適用される「否定疑似クラス」、要素Eのあとに記述されている要素に対して適用される「一般兄弟結合子」などがあります。

一般兄弟結合子：例

チルダ（~）を結合子にします。記述例では、h1要素の後に記述されている同階層のすべてのpre要素にスタイルが適用されます。

ターゲット疑似クラス

UI要素疑似クラス

否定疑似クラス

一般兄弟結合子

という事で今回から、いよいよCSS3です！CSS3で追加されたセレクタにつきまして、サンプルコードと共に記載いたしました。

個人的に多少難しいなぁとも思う属性セレクタや疑似クラス、多少指定方法が複雑だと思いますが、シンプルに極力短いスタイルシートを記載するには、欠かせないスキルのひとつかと思います。

複雑で難しいと思えるものほど、使うことになれ、当たり前のように使用することができるようになると、とても便利なセレクタだと思います。なので、しっかりと記載方法を理解しておくことをおすすめいたします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。