CSS4の疑似クラス使ってますか？

こんにちは。デザイン戦略部のtetsuyaです。
皆さまCSS4の疑似クラス使ってますか？
発表されたばかりの頃は対応ブラウザが少なく後回しにされがちですが、そろそろ対応ブラウザも多くなってきたので色々な疑似クラスを紹介していきたいと思います。
ちなみにCSS4という規格は存在せず、Level4のモジュールを総称してCSS4といわれています。

:has()

指定したセレクターがある場合、その親要素にスタイルを適用することができます。
ブラウザ対応状況

基本の書き方

p:has(span) {

}

サンプル

・pタグの次にspanタグがあるときpタグに適用される

HTML

<p class="has1"><span>spanタグ</span>ありのテキスト</p>
<p class="has1">spanタグなしのテキスト</p>

CSS

p.has1:has(span) {
    color: red;
}

結果

spanタグありのテキスト

spanタグなしのテキスト

・pタグの次にdivタグがあるときpタグに適用される

HTML

<p class="has2">pタグの次にdivタグがあるテキスト</p>
<div>divタグ</div>
<p class="has2">pタグの次にdivタグがないテキスト</p>

CSS

p:has2(+ div) {
    color: red;
}

結果

pタグの次にdivタグがあるテキスト

pタグの次にdivタグがないテキスト

他にも色々な使い方があります。
詳しくは「基本のcss疑似クラス:has()を振り返ってみよう！」の記事をご覧ください！

:not(a,b,c)

指定したセレクターに一致しない要素にスタイルを適用することができます。複数指定時の書き方が便利になりました。
ブラウザ対応状況

基本の書き方

p:not(a,b,c) {

}

サンプル

・クラス名「.not1」「.not2」「.not3」以外のpタグに適用される

HTML

<div class="not-sample">
    <p class="not1">クラス名not1のテキスト</p>
    <p class="not2">クラス名not2のテキスト</p>
    <p class="not3">クラス名not3のテキスト</p>
    <p class="not4">クラス名not4のテキスト</p>
</div>

CSS

.not-sample p:not(.not1, .not2, .not3) {
    color: red;
}

結果

:is()と:where()

複数のセレクターをまとめて記述することができます。
:is()と:where()の違いは詳細度で、:where()は詳細度が常に0になります。
:is()ブラウザ対応状況
:where()ブラウザ対応状況

基本の書き方

:is(a,b,c) {

}
:where(a,b,c) {

}

サンプル

・クラス名をまとめて書くことができ、全てのspanタグに適用される

HTML

<div id="is-where-Sample1">
    <p class="is1">クラス名<span>is1</span>のテキスト</p>
    <p class="is2">クラス名<span>is2</span>のテキスト</p>
    <p class="is3">クラス名<span>is3</span>のテキスト</p>

    <p class="where1">クラス名<span>where1</span>のテキスト</p>
    <p class="where2">クラス名<span>where2</span>のテキスト</p>
    <p class="where3">クラス名<span>where3</span>のテキスト</p>
</div>

CSS

/* .is1 span, .is2 span, .is3 span { }をまとめて記述できる */
#is-where-Sample1 :is(.is1, .is2, .is3) span {
    color: red;
}
/* .where1 span, .where2 span, .where3 span { }をまとめて記述できる */
#is-where-Sample1 :where(.where1, .where2, .where3) span {
    color: red;
}

結果

・:where()の詳細度が0なので:where()で指定したspanだけblueになる

HTML

<div id="is-where-Sample2">
    <p class="is1">クラス名<span>is1</span>のテキスト</p>
    <p class="is2">クラス名<span>is2</span>のテキスト</p>
    <p class="is3">クラス名<span>is3</span>のテキスト</p>

    <p class="where1">クラス名<span>where1</span>のテキスト</p>
    <p class="where2">クラス名<span>where2</span>のテキスト</p>
    <p class="where3">クラス名<span>where3</span>のテキスト</p>
</div>

CSS

#is-where-Sample2 :is(.is1, .is2, .is3) span {
    color: red;
}
#is-where-Sample2 :where(.where1, .where2, .where3) span {
    color: red;
}
/*　最後に上書き　*/
#is-where-Sample2 span { 
    color: blue;
}

結果

:any-link

訪問の有無に関係なくリンクにスタイルを適用することができます。
これまで:link、:visitedの両方を記述していた指定を:any-link一つの記述で指定できるようになりました。
ブラウザ対応状況

基本の書き方

a:any-link {

}

サンプル

・訪問の有無に関係なくaタグに適用される

HTML

<div class="any-link-sample">
    <a href="javascript:void(0);">any-linkを指定したテキスト</a>
</div>

CSS

.any-link-sample a:any-link {
    color: red;
}

結果

:focus-within

その要素または子孫要素にフォーカスがある場合にスタイルを適用することができます。
ブラウザ対応状況

基本の書き方

form:focus-within {

}

サンプル

・formタグ内のinputタグにフォーカスをあてるとformタグに適用される

HTML

<div class="focus-within-sample">
    <form>
        <label for="sample-input">↓こちらをフォーカス</label>
        <input id="sample-input" type="text">
    </form>
</div>

CSS

.focus-within-sample form:focus-within {
    background: red;
}
.focus-within-sample form {
    border: 1px solid #333;
    color: gray;
    padding: 10px 20px;
}

結果

まとめ

いかがだったでしょうか？
今回、疑似クラスに絞りましが、他にも便利なcss4が多数あります。
対応ブラウザを確認して積極的に使ってみてはいかがでしょうか。