CSS4から追加予定のどれかのセレクタにマッチする擬似クラス:matchesが便利そうです。
既存CSSの冗長な例
CSSをコーディングしていてよくあるのが以下のケース。
- INFORMATIONというページのテーブルにのみスタイルを指定したい
- thとtdは基本的に共通するスタイル
CSSだと以下の様になると思います。
（普段はもう少し省略しますがあえてtable以下を全て書いています）
body#information #content table tbody tr th,
body#information #content table tbody tr td {
border: 1px solid #999;
padding: 1em;
}
このコードで感じるのが body#information #content table tbody tr が繰り返されていて冗長だなと。2回も同じコード書きたくない…
CSS3で便利な機能が追加されたのでなにか解決方法あるのではと探しましたが現状では不可でした。
※後述のブラウザ独自実装で可能ですが現実的ではありません。
:matches()擬似クラスを使う
というわけで現状では使えませんがCSS4で追加予定の:matches()擬似クラスを使うと簡単に記述できます。
body#information #content table tbody tr :matches(th, td) {
border: 1px solid #999;
padding: 1em;
}
上記のように:matches()の引数にセレクタを指定することで先のコードと同様の指定となります。便利ですね！CSS3から実装して欲しかったです！！
ブラウザ独自実装 :any()
同機能はFirefoxがversion4から-moz-any()で独自実装していたようです。
:any – MDN
Chromeも-webkit-any()で対応しているみたいですね。
body#information #content table tbody tr :-moz-any(th, td) {
border: 1px solid #999;
padding: 1em;
}
ただ、両方対応させようとしたらベンダープレフィックスを2つ記述する必要がでてくるので本末転倒になってしまいますから現実的ではありません。IEも多分駄目でしょうし。（未確認）
しかもカンマ区切りが無理だったので以下のようなコードになってしまいます。
body#information #content table tbody tr :-moz-any(th, td) {
border: 1px solid #999;
padding: 1em;
}
body#information #content table tbody tr :-webkit-any(th, td) {
border: 1px solid #999;
padding: 1em;
}
というわけでCSS4が待ち遠しいですね。
