セレクタについて(2/4)その1 – css3を触ってみて思った4個の利点
css3を触ってみて思った利点の2個目
今回の記事は、前回の記事（レイアウトについて(1/4) – css3を触ってみて思った4個の利点）の続きです。
- レイアウト組むのが楽ちん
- セレクタが便利
- 画像に頼らず色々出来る
- アニメーションが素敵
というわけでセレクタについてですね。
css2だと、HTML側で細かな指定をしないと、見た目に差をつけにくかったのですが、css3のおかげでHTMLをよりシンプルにして、細かな指定をすることが可能になります。
詳細は続きから。
そもそもセレクタって？
セレクタっていうのは一言で言えば、「cssを効かせたい場所の指定」のことです。
/*hogeというidの部分を*/
#hoge{
/*カラーを赤色にする*/
color:#f00;
}
/*hogeというidの中にある、classのafe全ての部分を*/
#hoge .afe{
/*カラーを青色にする*/
color:#00f;
}
css2のときは上のような指定が多かったと思いますが、css3ではこの指定を細かく指定出来るようになります。
css2では、あまり細かな指定が出来ませんでしたし、メジャーなブラウザでも実装しきれていない物がありました。
このエントリではまずは基本的なセレクタについて説明したいと思います。
※表示確認には、Firefox3.5、Chrome4を使用しています。
子要素や弟要素を指定「E + F」「E > F」「E ~ F」
セレクタの基本である「#hoge .afe」の発展型で、#hogeの中にある.afe全て、という広範囲ではなく、より狭く指定する事が出来ます。
Eの要素の次（隣）のFを指定する「E + F」
Eの次のFは、俗に弟要素といいます。
EとFの間に違う要素が入ると指定されません。
サンプルはこちらh1 + p{
background-color:#faa;
}
Eの中にあるFを指定する「E > F」
Eの中のFは、俗に子要素といいます。
仮にEの中のFにF（孫要素）があったとしても、指定されません。
サンプルはこちらdiv > strong{
background-color:#cfc;
}
Eの要素の後のFを指定する「E ~ F」
Eの後にある同階層のFは、これも弟要素といいます。
同階層であれば、何個目の弟でも構いません。
EとFの間に違う要素が入っていても指定されます。
サンプルはこちらh1 ~ p{
background-color:#aaf;
}
フォーカスが合っている要素を指定「:focus」（css2）
css2の中で、多くのブラウザにてcss3の実装と一緒に実装されそうなセレクタがあったので、その説明をしたいと思います。
今まではJavascriptで対処していたと思いますが、form系（input,button,textareaなど）になどにフォーカスが合った時のスタイルを指定することが出来ます。
ちなみに、「:focus」の様に「:」を用いるセレクタを疑似クラスといいます。
サンプルはこちら#text:focus{
border-color:#f00;
background-color:#ffc;
}
フォーム系の状態を判別する指定「:enabled」「:disabled」「:checked」
こちらもJavascriptやclassをつけて対応していたと思いますが、form系（input,button,textarea 等）の状態を判別して、スタイルを指定することが出来ます。
※このサンプルは3個一緒の方がわかりやすいので、3個一緒のサンプルです。
要素が有効な状態のセレクタ「:enabled」
サンプルだと選択されていないinputを指定します。
要素が無効な状態のセレクタ「:disabled」
サンプルだとdisabledのinputを指定します。
要素が選択されている状態のセレクタ「:checked」
サンプルだとcheckedのinputを指定します。
サンプルはこちらinput:enabled + span{
background-color:#f00;
}
input:disabled + span{
background-color:#0f0;
}
input:checked + span{
background-color:#00f;
}
属性を判別するセレクタ「E[attribute]」
これははっきり言って種類が多いです。
ある属性（srcやhrefやname 等）を持った要素を指定するのに使いますが、指定できる種類は豊富です。
説明を聞いてもぱっとしない部分が多いかも知れませんが、サンプルなどをよく見てみてください。正規表現などをかじったことがある方は比較的理解しやすいかもしれません。
ちなみにこの様に属性を参照しているセレクタは属性セレクタといいます。
E要素で、attributeという属性を持っている要素を指定「E[attribute]」
attributeという属性を持っているか、持っていないかの単純な判断をします。
サンプルはこちらli[class]{
background-color:#f00;
}
E要素で、attributeの属性がvalueの値から始まる値を持っている要素を指定「E[attribute^=value]」
attributeという属性を持っていて、かつその値が指定したものから始まっているかどうかの判断をします。
サンプルはこちらli[title^="hoge"]{
background-color:#f00;
}
E要素で、attributeの属性がvalueの値を含む値を持っている要素を指定「E[attribute*=value]」
attributeという属性を持っていて、かつその値が指定したものを含んでいるかどうかの判断をします。
サンプルはこちらa[href*="kzms2.com"]{
background-color:#0f0;
}
E要素で、attributeの属性がvalueの値で終わる値を持っている要素を指定「E[attribute$=value]」
attributeという属性を持っていて、かつその値が指定したもので終わるかどうかの判断をします。
サンプルはこちらa[href$=".html"]{
background-color:#ff0;
}
E[attribute~=value]
attributeという属性を持っていて、かつその値が指定したものを独立して持っているかどうかの判断をします。
サンプルを見てもらえば判ると思いますが、複数classが適用されている中で、hogeというclassを持っているかどうか などの判断をします。
サンプルはこちらli[class~="hoge"]{
background-color:#f00;
}
E[attribute|=value]
aやlink要素で、hreflangやlangなどの言語に関する属性がある場合で、かつその値が指定したものを含んでいるかどうかの判断をします。
※これが属性セレクタで一番特殊でした。。。使う機会は少ないと思います（キッパリ
サンプルはこちらa[lang|="en"]{
background-color:#ff0;
}
いったんまとめ
- htmlに細かな記述をしなくても、cssで指定することが可能になる。
- といってもこれで半分くらい。css3で導入されたセレクタの量は異常
というわけでセレクタ多すぎです…いいことなのですがまとめきれないので、次回もまたセレクタについてまとめたいと思います。
4エントリで完結みたいな書き方をしてすみません。挫ける前にpostしたかったんです…！
続きはまた次回のエントリで＞＜
※ちなみに、どのブラウザでcss3の、どの指定が出来るのかはCSS Selectors testsuiteを各ブラウザで訪れれば、どのセレクタが有効かが一目でわかるのでお勧めです。
