【CSS】:has()の指定について

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

:has()の指定についてのメモ。

:has()の指定

まずよく使うのが特定の子要素を持つ場合の親要素のスタイル変更は以下のように記述します。この場合、子要素にpを持った親要素boxのスタイルが変更されます。

<div class="box">
  <p>テキスト</p>
</div>

.box:has(p) {
    background-color: red;
}

以下の場合は、直後に特定の要素が隣接する場合に、その直前の要素のスタイル変更の例になります。

<p>テキスト</p>
<span>テキスト</span>

p:has(+ span) {
    background-color: red;
}

以下の場合は、liの中にul要素がある場合にアイコンや擬似要素を表示するスタイルになります。liの中にulがない場合は、疑似要素が表示されないようにできます。

<ul class="list">
   <li class="item">
       <a href="">メニュー</a>
   </li>
   <li class="item">
       <a href="">メニュー</a>
       <ul class="innerList">
           <!-- サブリストが入る -->
       </ul>
    </li>
    <li class="item">
         <a href="">メニュー</a>
     </li>
</ul>
.item a {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.item a:has(+ .innerList)::after {
    content: "";
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 20px;
    height: 20px;
    display: block;
    background-color: orange;
}

.innerList {
    height: 0;
    opacity: 0;
}

要素数がn個以上の場合、親要素のスタイル変更は以下になります。

<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
　　<div class="box"></div>
</div>


.box {
    width: 100%;
    height: 100px;
    background-color: orange;
}

.wrap:has(.box:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

ちなみに他にも、:has()の中で:has()を使ったり、:not()を組み合わせて使うこともできます。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧