:is()
CSSでの論理積の表し方
:is()
を用いると、
CSS
においても
論理積
を表すことが
出来
る
例えば
.card
の
子孫
かつ、
.featured
の子孫である
h2
を
指定
したい
場合
、
普通
なら積となる
親要素
の全ての通りを書きだす
必要
があったが、
:is()
を用いればそれらを
短縮
できる
code:css
.card .featured h2,
.featured .card h2
↓
:is(.card h2):is(.featured h2)
もっと言えば
section
または
nav
または
header
の
子孫
の
section
または…
と続くときも、
従来
ならば
3^n
回
の
全ての通り
を
書き下
す
必要
があるが、
:is()
を用いれば
:is(section, nav, header) :is(section, nav, header) ...
このように
圧倒的
に
短縮可能
であり、また
可読性
も
大幅
に
上昇
する