ISSEN 
はじめに
この記事の概要
こんちには、株式会社TOKOSのたくまです！
CSSの疑似要素といえば、::beforeや::afterをご存じの方は多いかと思いますが、:hasという疑似要素があることをご存知でしょうか？:hasは比較的新しい機能で使用方法をまだご存知でない方もいるかと思います。ただ、:hasを使いこなせるとかなり便利なので、今回はcssの疑似要素:hasの概念と使い方についてご紹介したいと思います！
対象読者
- cssを勉強中の方
- 疑似要素や::before、::afterの使い方は知っているが、:hasの使い方は知らない方
今回は、基本的な疑似要素の使い方は割愛させて頂きます。
疑似要素について知りたい方は以下の記事が参考になるかと思いますので、お読み下さい。
: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はfirefox以外で使用可能です。
さいごに
今回は疑似要素の:hasについて紹介しました。:hasは、CSSの新たな機能として、より複雑なDOM構造の中でのスタイリングを容易にするための便利な機能です。ネストされた要素や子孫要素、複数の要素の組み合わせに基づいてスタイルを適用することができます。是非、この新機能を活用して、効率的なスタイリングを行ってみてください！
今回は:hasについて紹介しましたが、HTMLやCSSについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方にもわかり易い言葉で丁寧にせつめいがされているので、とても参考になります！
