CSSはセレクタを覚えることでスキルが増します。
セレクタには、タグ、クラス、IDという基本的な構成に加えて、擬似要素や擬似クラス、属性セレクタなどなど、意外とたくさん存在していて、仕事でCSSを扱っているけど、全てを知らない人も少なくないのではないでしょうか？
自身のない人は、色々なページで解説やリファレンスが掲載されているので、一度しっかり見ておくといいでしょう。
http://www.htmq.com/csskihon/005.shtml
いろいろサンプル
リファレンスページであまり見かけないセレクタ記述方法を書いてみました。
1. タグに複数のクラスが付いている時に、複数のクラスが付いている時の書き方。
下記のような場合ですね。
<div class="test active">
HogeHoge
</div>
こんな時は、次ようにセレクタで書きます。
div.test.active{
border : 1px solid red;
}
css記述の箇所は適当ですが、セレクタ部分は、単純にクラスを複数繋げて書くことで、ANDセレクタ扱いになります。
ちなみに、ORセレクタは、見なくてもわかると思いますが、以下のように書きます。
div.test,
div.active{
border : 1px dotted blue;
}
2. notも複数条件でのセレクタが書けます。
<ul>
<li class="aaa"></li>
<li class="aaa active"></li>
<li class="bbb"></li>
<li class="bbb active"></li>
<li class="ccc"></li>
<li class="ccc"></li>
</ul>
上記で"aaa"クラス且つ"active"クラス以外をセレクタでピックアップする場合は以下のように書きます。
div:not(.aaa):not(.active){
background-color : #f5f5f5;
}
これも除外するnotのAND検索に該当します。
3. 複数の属性のAND検索
<span data-id="aaa" data-type="1">1</span>
<span data-id="aaa" data-type="2">2</span>
<span data-id="aaa" data-type="1">3</span>
<span data-id="bbb" data-type="2">4</span>
<span data-id="bbb" data-type="1">5</span>
<span data-id="bbb" data-type="2">6</span>
上記のdata-id="aaa"かつdata-type="1"の物をセレクタで記述すると以下のようになります。
span[data-id="aaa"][data-type="1"]{
border:1px solid red;
}
これもシンプルですね。
このように、cssセレクタは、数珠つなぎにすることでAND処理をどんどん行う事が可能なようです。
重要なのは、こうしたセレクタ構成が作れるDOM構造と、属性やHTMLの構造体であるとも言えるので、レンダリングの早いCSSを効率的に使って、無駄なJSを書かなくてもいいWEBサイトを構築するべきですね。
0 件のコメント:
コメントを投稿