[css] セレクターの少し特殊な書き方

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

CSSはセレクタを覚えることでスキルが増します。
 

セレクタには、タグ、クラス、IDという基本的な構成に加えて、擬似要素や擬似クラス、属性セレクタなどなど、意外とたくさん存在していて、仕事でCSSを扱っているけど、全てを知らない人も少なくないのではないでしょうか?
 

自身のない人は、色々なページで解説やリファレンスが掲載されているので、一度しっかり見ておくといいでしょう。
 

http://www.htmq.com/csskihon/005.shtml

リファレンスページであまり見かけないセレクタ記述方法

1. タグに複数のクラスが付いている時に、複数のクラスが付いている時の書き方。
 

下記のような場合ですね。

 

こんな時は、このようにセレクタで書きます。
 

 

css記述の箇所は適当ですが、セレクタ部分は、単純にクラスを複数繋げて書くことで、ANDセレクタ扱いになります。
ちなみに、ORセレクタは、見なくてもわかると思いますが、以下のように書きます。
 

 

2. notも複数条件でのセレクタが書けます。
 

 

上記で”aaa”クラス且つ”active”クラス以外をセレクタでピックアップする場合は以下のように書きます。
 

 

これも除外するnotのAND検索に該当します。

3. 複数の属性のAND検索
 

 

上記のdata-id=”aaa”かつdata-type=”1″の物をセレクタで記述すると以下のようになります。
 

 

これもシンプルですね。
 

このように、cssセレクタは、数珠つなぎにすることでAND処理をどんどん行う事が可能なようです。
 

重要なのは、こうしたセレクタ構成が作れるDOM構造と、属性やHTMLの構造体であるとも言えるので、レンダリングの早いCSSを効率的に使って、無駄なJSを書かなくてもいいWEBサイトを構築するべきですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です