今回は疑似クラスである:is()、:has()、:whereの3つを紹介していきたいと思います。
一部古いブラウザでは使用できないものもありますが最新のブラウザであればほぼ使用できるし便利な疑似クラスだし使うメリットがあります。
それでは一つずつ疑似クラスを見ていきましょう。
便利な疑似クラス3点
:is()
1つ目の疑似クラスは「:is()」です。
これは複数のセレクターをグループ化することができます。
たとえば下記のhtmlがあるとします。
<div class="box">
<ul class="list">
<li class="item">
<p>text01</p>
<div>text02</div>
<span>text03</span>
</li>
</ul>
</div>それぞれpタグ、divタグ、spanタグのテキストのカラーを赤にする場合、下記のように記述すると思います。
.item p,
.item div,
.item span{color: red;}ですが疑似クラス「:is()」を使うと次のようになります。
.item :is(p, div, span){color: red;}セレクタをまとめて書くことができるのでシンプルになりましたね。
:is()を使うことで下記のようなメリットがあります。
:is()を使うメリット
・コードを簡潔化できる
複数のセレクタをグループ化させることでコードがシンプルになり短く記述することができる
・パフォーマンス向上
:is()を使うことでCSSエンジンが最適化してくれるため効率的に処理できる
:has()
2つ目の疑似クラスは「:has()」です。
特定の子要素を持っている親要素にスタイルを適用することができます。
次はlistクラスの中にあるliタグのitemクラスがある要素が含まれている場合にそのlistクラスにたいしてボーダーを適用する例になります。
.list:has(li.item){
border:solid 1px #eee;
}:has()を使うことで下記のようなメリットがあります。
:has()を使うメリット
・JavaScriptを使わなくても特定の子要素が存在するかどうかによってスタイルを変えることができる
:where()
3つ目の疑似クラスは「:where()」です。
:where()を使うことで優先度を気にせず柔軟にスタイルを適用することができます。
まず:where()でh1、h2、h3にテキストカラーをダークブルー、マージンの下に16pxを指定します。
h2にカラーの赤を指定します。
:where()は優先度が0になるため競合を避けやすくなりほかのスタイルが上書きしやすくしてくれます。
:where(h1, h2, h3) {
color: darkblue;
margin-bottom: 16px;
}
h2 {color: red;}:where()を使うことで下記のようなメリットがあります。
:where()を使うメリット
・リセットCSSや初期設定に適しています
擬似クラスをうまく使い分けることで効率的なcssの指定が可能になります。
コメント