【CSS】:has()が便利なので使おう
リリース当時から随分長い間Firefoxでサポートされていなかった便利なCSS「:has()」が、2023年12月のFirefoxのアップデートにより、主要ブラウザ全てに対応したのでご紹介します。
:has()
:has()はCSSの擬似クラス関数で、今までCSSだけでは取得できなかった兄弟要素や親要素を取得することができます。
特定の兄弟を持つ要素の選択
下記のコードはh1タグが弟要素にh2タグを持っているかどうかを判断し、弟要素にh2がある場合のh1の下余白を調整しています。
HTML
<!--h2無し-->
<article>
<h1>見出し1</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
<!--h2有り-->
<article>
<h1>見出し1</h1>
<h2>見出し2</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
CSS
h1,h2 {
margin:0 0 20px;
}
h1:has(+ h2) {
margin:0 0 5px;
}
●デモページ
https://codepen.io/k-ooi/pen/zYXEoOz
特定の要素を持つ親要素の選択
CSSを以下のように指定することで、特定の要素を含む親要素のスタイルを指定することができます。
.a:has(.b) {
/* .aが.bを含む時、.aに適用されます */
}
.a:has(.b , .c) {
/* .aが.bまたは.cを含む時.aに適用されます（or） */
}
.a:has(.b)has(.c) {
/* .aが.bと.cを含む時.aに適用されます（and） */
}
これらを利用することで、様々なことが可能になります。
ホバーで親要素のスタイルを変更
子要素にホバーした際に、親要素の背景色を変更しています。
HTML
<body>
<a class="btn" href="#">ボタン</a>
</body>
CSS
body:has(a.btn:hover){
background: yellow;
}
●デモページ
https://codepen.io/k-ooi/pen/rNbGWzY
カードコンポーネントの画像の有無でスタイルを変更
.card要素が.image要素を含んでいる際にflexをかけ、余白などを調整をしています。
HTML
<!--画像有り-->
<div class="card">
<div class="image"><img src="https://marukin-ad.jp/ooi/has/image.jpg" alt=""></div>
<div class="text">
<h2>タイトル</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<!--画像無し-->
<div class="card">
<div class="text">
<h2>タイトル</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
CSS
body {
width: 500px;
margin: 60px auto;
}
.card {
margin-top: 40px;
padding: 20px;
border: #333333 1px solid;
}
h2 {
font-size: 18px;
font-weight: bold;
}
p {
margin-top: 8px;
font-size: 16px;
}
.image{
width:200px;
}
img{
vertical-align:bottom;
}
.card:has(.image) {
padding: 0;
display: flex;
align-items: center;
gap: 12px;
}
●デモページ
https://codepen.io/k-ooi/pen/ZEZXBVr
他にもフォームの送信ボタンを同意のチェックボックスにチェックが入ったら有効にするなど、やり方によって様々なことが可能になります。
慣れると非常に便利に使えてコードもスッキリするので、使ったことの無い方はぜひお試しください。
WEBプログラマー ／ O.K
