WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >CSS

CSSの:has()という擬似クラスをご存知でしょうか？
:has() 疑似クラスとは、指定した要素がある場合にのみスタイルを適用できるCSSです。
指定した子要素や隣接要素の有無によってスタイルを変えることが可能で、
覚えておくと便利なプロパティです。

ブラウザのサポート状況は下記です。
https://caniuse.com/?search=%3Ahas
主要なWebブラウザにおいてはすべてサポートされています。

使用例

スマートフォンでのナビゲーション

スマートフォンでのナビゲーション画面の制作で、サブナビがある要素には下向き矢印、ない要素には右向き矢印のアイコンをつける例です。

・HTML

<nav>
　<ul>
　　<li><a href="#">ナビ</a></li>
　　<li><a href="#">ナビ</a>
　　　<div class="sub_nav">
　　　　<p>ナビ</p>
　　　　<ul>
　　　　　<li><a href="#">サブナビ</a></li>
　　　　　<li><a href="#">サブナビ</a></li>
　　　　</ul>
　　　</div>
　　</li>
　　<li><a href="#">ナビ</a>
　　　<div class="sub_nav">
　　　　<p>サブナビ</p>
　　　　<ul>
　　　　　<li><a href="#">サブナビ</a></li>
　　　　　<li><a href="#">サブナビ</a></li>
　　　　</ul>
　　　</div>
　　</li>
　　<li><a href="#">ナビ</a></li>
　</ul>
</nav>			

・CSS

nav > ul > li > a{
　position: relative;
}
nav > ul > li > a:after{
　　content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 7px;
    height: 7px;
　　background:url(../img/icon_arrow-right.png);
　　transform: translateY(-50%);
    transition: all .3s;
}
/* liタグの子要素に.sub_navがあるとき */
nav > ul > li:has(.sub_nav) > a:after{
    width: 8px;
    height: 8px;
    background:url(../img/icon_arrow-up.png);
}

カード型レイアウト

カード型のレイアウトを作成する際、画像がある場合にのみflexの指定をする例です。

・HTML

<div class="card">
 <img src="img/img01.jpg" alt="">
 <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="card">
 <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

・CSS

.card{
	border: 2px solid #ccc;
	padding: 20px;
	margin-top: 20px;
}
/* .cardの子要素にimgタグがある場合 */
.card:has(img){
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card:has(img) p{
	margin-left: 20px;
}

まとめ

このように、JavaScriptを使用しなくてもクラスや要素の有無が判別できます。
CMSが組み込まれるページをコーディングする際などにも役に立つと思います。
とても便利なプロパティなのでぜひ覚えて使ってみてください！