:is()、:where()、:has() 疑似クラスを使用して CSS の作成を減らす

CSS は長年にわたって大きく進化してきました。作業を楽にする多くの新しい強力なツールが導入されています。これらのツールの中から、今日は3つをピックアップしました。 :is()、:has()、:where() 疑似クラスがコードを簡素化し、読みやすくし、繰り返しを減らすのにどのように役立つかを見ていきます。

この記事では、:is()、:where()、:has() 疑似クラスの内容、方法、および理由を説明します。これらの疑似クラスを使用して、より最適化されたコードを作成することで Web サイトをデザインする方法がわかります。これは、ソフトウェア開発の優れた実践となる可能性があります。

疑似クラスについて説明するので、基本的な概要を一文で説明します。 CSS の擬似クラスは、特定の条件または状態に基づいて要素に適用されるルールです。疑似クラスの詳細については、このリンクをクリックしてください。

私たちはどのような問題を解決しているのでしょうか?

CSS (カスケード スタイルシート) を使用して Web サイトをデザインするとき、誰もが直面するのがコードの繰り返しです。

例:

.card .title, .card .body-content, .card .footer-action {
 ...
}

この例では、子セレクターごとに繰り返される .card セレクターがあります。しかし同時に、同じスタイルが適用されていることもわかります。

これは、各セレクターをカンマで区切ることにより、CSS でグループ セレクターが通常どのように機能するかです。このコードは正常に動作しますが、ここでの懸念は、繰り返しが発生してうまく整理されないことを避けることです。

ここで直面するもう 1 つの問題は、CSS の特異性の問題です。このようなコードを繰り返し使用しすぎると、どのようなスタイルがどこでどのような条件で使用されているかを忘れてしまうことがあります。ここで、これらの疑似クラスが重要な役割を果たします。

各疑似クラスを 1 つずつ見て、その目的を理解しましょう。

:is() 擬似クラスの説明

:is() 擬似クラスを使用すると、同じコードを繰り返さずに、共通のスタイルを共有する複数の要素を選択できます。セレクターを 1 つのブロックに結合して簡素化し、冗長性を削減します。引数としてセレクターのリストを受け取り、そのリスト内のセレクターのいずれかに一致するすべての要素にスタイルを適用します。

.card :is(.title, .body-content, .footer-action) {
 ...
}

上記の例を使用しました。:is() 疑似クラスでグループ化することで、CSS コードの繰り返しをいかに簡単に減らすことができるかがわかります。コードをクリーンかつ効率的に保ちます。

上記の例は、.title、.body-content、および .footer-action を :is() 疑似クラスへの引数として提供することを示しています。 :is() の前に、親コンテナー .card は、子のスタイルを他のコードから分離するように定義されます。これは、:is() がそのリストに一致するすべての引数に同じスタイルを適用する方法です。

:is() 疑似クラスは、すべての主要なブラウザで広く使用されています。caniuse.com からの以下の画像は、ブラウザのさまざまなバージョンの詳細な概要を示しています。

...

:where() 疑似クラスの説明

:where() 疑似クラスは :is() に非常に似ています。複数のセレクターをグループ化して、コード内の繰り返しを減らすことができます。セレクターを引数として受け取ります。 :is() と :where() 擬似クラスの主な違いは、:where() には特異性がまったくないことです。これは、CSS セレクターに余分な重みを追加せずに要素をスタイルしたい場合に便利であることを意味します。

:where() 擬似クラスで定義されたスタイルは簡単にオーバーライドできます。これは、:where() がセレクターに特別な詳細性を追加せず、:where() 疑似クラス内のスタイルがセレクター自体の詳細性に基づいていることを意味します。

:where() 疑似クラスを使用する 1 つの良い使用例は、複数の要素の基本スタイルを定義することですが、そのスタイルが、後でオーバーライドされる可能性があるより具体的なルールに影響を与えたくない場合です。

このように:where() を使用すると、競合時にどのルールが優先されるべきかについて CSS が意見を持ちすぎずにスタイルを適用できます。

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

上記の例では、h1、p、および a タグが、基本スタイルの :where() 疑似クラスへの引数として提供されています。その後、スタイルを備えたスタンドアロン タグとして使用されるタグは、:where() で定義されたスタイルを簡単にオーバーライドできます。

:is() と同様に、:where() もほぼすべての主要なブラウザでサポートされています。サポートされているブラウザのバージョンを確認するには、caniuse.com から以下の画像を参照してください:

:has() 擬似クラスの説明

:has() は親セレクターです。これは、親要素に含まれる子に基づいて親要素を選択できることを意味します。 CSS では以前はこの種の動作が許可されていなかったため、これは非常に大きな問題です。 :has() は条件付きのニーズを満たすため、CSS の if ステートメントであるとも言えます。

img が含まれている場合にのみ div のスタイルを設定したいとします。これは従来の CSS では不可能でしたが、:has() によって可能になりました。

<!-- Card with Image -->
<div class="card">
      <img src="https://placeholderjs.com/300x300" />
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

以上が:is()、:where()、:has() 疑似クラスを使用して CSS の作成を減らすの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。