:is()と:where()で複数セレクターが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 13日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 13 日目 例えば td と th とか。似たような位置にある似たようなセレクターをまとめて書けるので楽ちんです。 例 デモ：https://codepen.io/ginpei/pen/yLZWJrz .TheTable > :is(thead, tbody) > tr > :is(th, td) { border: 1px solid lightgray; } :is() の詳細度に注意 :is() はその引数で与えられるセレクター群の中で最も詳細度が高いものになります。 例えば :is(a, .b, #c) と書いた場合、詳細度はそれぞれ a が 0,0,1 、 .b は 0,1,0 、 #c は 1,0,0 で、:is() 全体の詳細度は 1,0,0 になります。 これはちょっと注意が必要です。合致する対象ごとじゃ
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
