2022年4月13日のブックマーク (1件)

  • CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

    CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像(.visual)が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定(Canaryはすでに使用できます)で、すべての

    CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
    kasuke18
    kasuke18 2022/04/13
    “:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。”