適切なタイトルが思いつかなかったので適当。(良いタイトルの編集リクエストください)
最初に言っておくと、この書き方は単純に分かりにくいし使用を推奨するわけじゃないです。
CSSはsass使うなら使う意味なにもない。
JavaScriptでquerySelectorAll使うときとかたまに便利かもしれない。
説明
※説明の為に単純化してるので意味はありません。:nth-childとかは使いません。
<ul class="parent-1">
<li class="child-1">a</li>
<li class="child-2">b</li>
<li class="child-3">c</li>
</ul>
<ul class="parent-2">
<li class="child-1">a</li>
<li class="child-2">b</li>
<li class="child-3">c</li>
</ul>
このparent-1以下のchild-1, child-2だけ指定したいとする。
コンマで複数要素を指定できるが、↓のように書くとparent-2のchild-2まで指定されてしまう。
.parent-1 .child-1, .child-2 {
color: orange;
}
なので、このように書かなきゃいけない。
2個だからまだいいけど増やせば増やすほど行が増える。
.parent-1 .child-1,
.parent-1 .child-2 {
color: orange;
}
:not(a)
*:not()という擬似クラスがある。
*:not(div)だったらdiv以外にマッチする。
また、これには*:not(div, span)と複数一括で指定できる。
つまり...
どういうことだってばよ？
:not(:not(a, b, c))
もう一回ひっくり返したらよくね？
.parent-1 :not(:not(.child-1, .child-2)) {
color: orange;
}
無事、.parent-1以下の.child-1と.child-2だけ色が変わりましたね。
冒頭にも書いたけど、この書き方を推奨するわけじゃないです。遊びで使う分にはいいかも。
ほかにも良さげな書き方あったら教えてください。
↧