【CSS】便利な疑似要素:hasの使い方を紹介
はじめに
この記事の概要
こんちには、株式会社TOKOSのたくまです！
CSSの疑似要素といえば、::beforeや::afterをご存じの方は多いかと思いますが、:hasという疑似クラスがあることをご存知でしょうか？:hasは比較的新しい機能で使用方法をまだご存知でない方もいるかと思います。ただ、:hasを使いこなせるとかなり便利なので、今回はCSSの疑似クラス:hasの概念と使い方についてご紹介したいと思います！
対象読者
- CSSを勉強中の方
- 疑似要素や
::before、::afterの使い方は知っているが、:hasの使い方は知らない方
今回は、基本的な疑似要素の使い方は割愛させていただきます。
疑似要素について知りたい方は以下の記事が参考になるかと思いますので、お読みください。
CSS擬似要素を理解しよう！::beforeや::afterの使い方【サンプルあり】 | 東京のホームページ制作 / WEB制作会社 BRISK
「擬似要素」という言葉から何を思い浮かべますか？ コーディングをしたことがある方が最初に思い浮かぶのは、やはり
b-risk.jp:hasとは？
:hasは、ある要素の中に特定の要素が存在するかどうかをチェックし、その結果に基づいてスタイルを適用できます。具体的には以下のような構文で使用されます。
:has(セレクタ) {
/* スタイルの定義 */
}:hasを使うことで、ネストされた要素の中にある特定の要素をターゲットにしてスタイルを適用できます。
これだけでは使い方のイメージが沸かないかと思うので、実際の活用法についてご紹介していきます！
:hasの使用例
例1：指定した要素を持つ子孫要素にスタイルを適用する
:hasを使用することで、指定した要素を持つ子孫要素に対してスタイルを適用できます。
例えば、以下のようなHTMLコードがあったとします。
<body>
<div>
<h2>Title</h2>
<p>Paragraph text</p>
</div>
<div>
<h2>Title</h2>
<span>Span text</span>
</div>
</body>この場合、<p>要素を持つ<div>要素にスタイルを適用するには、以下のようなCSSのコードを使用できます。
div:has(p) {
background-color: yellow;
}この例では、<div>要素の中に<p>要素が含まれている場合に背景色を黄色に設定します。最初の<div>要素に対してはスタイルが適用されますが、2番目の<div>要素には適用されません。
指定した要素の特定の子孫要素にスタイルを適用する
:hasを使用することで、子孫要素の中にある特定の要素に対してスタイルを適用することもできます。
例えば、以下のようなHTMLコードがあったとします。
<h2>タイトル</h2>
<p>サンプルテキスト</p>
<h2>タイトル2</h2>
<h3>サブタイトル2</h3>
<p>サンプルテキスト2</p>この場合、<h2>要素の直後に<p>要素を持つ<h2>要素にスタイルを適用するには、以下のようなCSSのコードを使用できます。
h2:has(+ p) {
color: red;
}上記で示したように、:hasを使用することでこれまでCSSを当てづらかった要素にも簡単にCSSを当てることができます。
:hasは慣れるまで記述方法が複雑に見えますが、そんなときは一度、言語化することで理解しやすくなると思います！
例えば最初の例でいうと、「<p>要素を持つ<div>要素の背景色を変えたい」になります。
:hasは()の中身の要素を目印に、その要素をもつ要素にスタイルをあてる疑似要素です。
なので、最初のコードを言語化すると、下記のようになります。
div:has(p) {スタイルの記述}
/* p要素を持っているdiv要素にスタイルを当てる */:hasを使用する際は、まず実現したいことやスタイルをどのようにあてたいかを言語化してみましょう！
そして、:hasの()の中の要素を目印に持っている(hasしている)要素にスタイルをあてるという考えで記述すると分かりやすいかと思います！
ちなみに、:hasを使用することで下のようなレイアウトをCSSのみで実装することも可能です！
こちらの実装方法は、次回以降の記事で紹介したいと思います！
:hasの対応ブラウザ
現在、:hasは主要なブラウザ（Chrome、Firefox、Safari、Edge）すべてでサポートされています。
ブラウザの対応状況は以下で確認できます。
"has" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.comさいごに
今回は疑似要素の:hasについて紹介しました。:hasは、CSSの新たな機能として、より複雑なDOM構造の中でのスタイリングを容易にするための便利な機能です。
ネストされた要素や子孫要素、複数の要素の組み合わせに基づいてスタイルを適用できます。
是非、この新機能を活用して、効率的なスタイリングを行ってみてください！
この記事を書いた人
