CSS: Container queries と :has() を試す

1. このページの目的

CSS の Container queries と :has() を試します。

@container and :has(): two powerful new responsive APIs landing in Chromium 105 - Chrome Developers という記事の中で、この2つは a match made in responsive heaven であると紹介されています。a match made in heaven というのは「相性がよい二人」とか「最高の組み合わせ」といった意味で、この中の heaven を responsive heaven に変えることによって、「レスポンシブに関して最高の組み合わせである」といった意味を表しているようです。

2. デモ

2-1. Container queries

HTML

<div class="card-container">
  <div class="card">
    <p>foo</p>
    <p>bar</p>
  </div>
</div>

CSS

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (width <= 550px) {
  .card {
    grid-template-columns: 1fr;
  }
}

結果

foo

bar

2-2. :has()

HTML

<p><span>span要素</span> を含む p要素の背景色は黄色になります。</p>
<p>こちらは、span要素を含まない p要素です。</p>

CSS

p {
  background-color: #ccc;
  border: 1px solid black;
  padding: .5em;
}
span {
  border: 1px solid black;
}
p:has(span) {
  background-color: yellow;
}

結果

span要素 を含む p要素の背景色は黄色になります。

こちらは、span要素を含まない p要素です。

2-3. Container queries と :has() を組み合わせて使う

@container and :has(): two powerful new responsive APIs landing in Chromium 105 - Chrome Developers

を参照して下さい。

2-4. jQueryの has() と :has() をどちらも使った場合を実験する

.has() | jQuery API Documentation Example のコードを利用している。

HTML

<div class="demo demo2-4">
  <ul><li>Does the UL contain an LI?</li></ul>
</div>

CSS

.demo2-4 ul:has(li) {
  color: blue;
}

JavaScript

let $ = jQuery;
$( ".demo2-4 ul" ).append( "<li>" +
  ( $( ".demo2-4 ul" ).has( "li:contains('Does')" ).length ? "Yes" : "No" ) + "</li>" );
$( ".demo2-4 ul" ).has( "li" ).addClass( "full" );

結果

  • Does the UL contain an LI?

3. 参考