2022年09月6日(火)
:has()を使って親要素内に存在する子要素を数えるCSSのサンプル
Result
See the Pen
Counting child items with :has() by kachibito (@kachibito)
on CodePen.
かなり世間から遅れていて今更感ありますが目を惹かれたサンプルを見かけたので:has()を試してみようと思います。
What’s Missing From CSS?でも結果として出ていましたが、:has()はずっとCSSに求められていた機能でしたのでやっと来たかという思いの方も多そうですね。
タイトル通り、上記サンプルは親要素内に存在する子要素を数え、それに応じてスタイルを変更するサンプルです。
表示されるテキストの変化はdata属性で実装されています。数字のカウンターはcounter-incrementとcontent: counter(count);が使われています。
css
.list { --color: black; color: var(--color); } ul { border: 3px solid var(--color); padding: 0; color: #000;...
0
0
4
6author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『:has()を使って親要素内に存在する子要素を数えるCSSのサンプル』についてまとめています。
この記事は特にレスポンシブ・Google・Chrome・Firefox・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
