ベテランほど使わずに損しているCSSセレクタまとめ・その1

初版公開日：2018年11月3日 | 最終編集日：2019年3月4日

タイトルは誇張です。悪しからず・・・。

ある程度歴のある、特にIE6時代を知っているマークアップエンジニアだと、新しい仕様やTIPSを目にしても「それIEで動くの？」と考えてしまう癖がついていると思います。

そしてその殆どがIE（6～9）が動かない事を知って落胆するということに慣れてしまっているので、HTML5+CSS3が流行りだした時にも、「どうせブラウザの実装待ちでしょ」と決めつけ、新しい知識を学ぼうとしない人も居たのではないでしょうか。

実際、ブラウザの互換をどこまで考えるかで決めて行かなければなりませんが、国内シェアでは Chrome・Firefox・IE11・Edge・Safari の5つのブラウザで約92％を占めています。

IEの過去バージョンで多いものでもIE8で1％を切っているので、そろそろ「使ってもいい」ものが出てくると思います。

と、言いますか、もうIE11だけ気にしていればよいものと思います。

そこで今回は、「Chrome・Firefox・IE11・Edge・（Safari）」で「そろそろ使えるようになった」CSSセレクタをまとめてみました。

実際は、とても昔から使えるのですが…。

※全セレクタの一覧・網羅ではないのでご注意ください。

結合子

結合子はIE7時代から使用可能です。もう安心して使えると思います。※互換モードなど特殊な環境でなければ。

同じ子要素同士の中で、A要素の直後のB要素を指定可能。
必ずこの後にこれが来るという場合に利用可能ですね。

同じ子要素同士の中で、A要素よりも後方に出てくるB要素を指定可能。
この要素よりも後ろのものはという指定はあまり思い浮かばないかもしれないです。
その場合、親要素からの継承にしてしまう場合が多いですかね。

A要素の直下の子要素を指定可能。「直下の子要素」は「頭痛が痛い」的な表現ですが、つまりは孫要素には効かせたくない場合に使えます。
便利なのでよく使いますが、仕様変更などで構造の変更を余儀なくされた場合などには弱いので、絶対に親子関係が崩れない箇所に使用するのが吉です。

属性セレクタもIE7時代から使用可能です。もう安心して使えると思います。※互換モードなど特殊な環境でなければ。

指定した属性を持つものを指定可能。HTML5になって基本的に「無駄な属性」を付与することは少なくなり、属性が付与されるのであれば同等の属性が付与されるはずなので、あまり使い道はないかもしれません。

指定した属性の属性値と一致するものを指定可能。属性値によって分けるというのは、上記よりは利用シーンが多いかもしれません。特にフォームパーツなどでは使いやすいですね。

指定した属性の中にを持つものを指定可能。小難しく書くのであれば、「属性値が空白区切りの語のリストで、その中の1つが一致する要素」とのこと。

簡単に言えば、複数のclassがついている場合を想像し、そのうちの一つが一致していればという感じです。（※class属性の場合、クラスセレクタを利用すればいいので使いませんが）

ただやはり、複数の属性値をつける場合がほとんど無いので、自分でdata属性をつけた場合など以外はあまり使われないかもしれません。

指定した属性の属性値が属性値から始まるものを指定可能。
何に使えそうかと例を探したところ、href属性で「#」から始まるページ内リンクを特定するのに使用したりできそうです。

指定した属性の属性値が属性値で終わるものを指定可能。
何に使えそうかと例を探したところ、href属性で「任意の拡張子」で終わるリンクを特定するのに使用したりできそうです。

指定した属性の属性値が属性値のどこかに含まれているものを指定可能。
あまり使い道が思い浮かびませんが、href属性内で任意の文字列「google」が含まれているリンクを特定するなどが可能そうです。

指定した属性の属性値が一致するか属性値から始まりハイフンの後に何かが続くものを指定可能。

例えば属性値をhogeとした場合、hogeとhoge-fuagaやhoge-piyoが一致します。※hogehogeは一致しません。

これこそ本当に使い道がわからないので、サンプルコードが雑です。

まずは「結合子」と「属性セレクタ」をまとめてみました。

両方ともIEの古いバージョンを気にしなければ積極的に使えるセレクタです。

属性セレクタの一部は使い道が限定されますが、上手く使えば無駄なclassや継承の数を減らすことができるでしょう。

この他にも「構造擬似クラス」や「擬似要素」があるのですが、数が多くなってきましたので、次の記事に分けたいと思います。