CSS 子要素がn個以上ある時(:has()を上手く使うぜ)💨

CSS 子要素がn個以上ある時(has()を上手く使うぜ)
この記事は約1分で読めます。
広告

子要素によって親の要素のスタイルが変更するのってJSじゃなきゃ指定がムズそうだぜ!って思うけど「:has()」を使えば結構簡単にできちゃうんだ。

下のHTMLで子要素が5個以上ある時、親要素の文字色を赤に変更して子要素の文字色を赤くしてみます。

HTML
<div class="demo">
  <ul>
    <li>吹き拔ける風にさえ目を閉じる</li>
    <li>お前は走りだす何かに追われるよう</li>
    <li>俺が見えないのか すぐそばにいるのに</li>
    <li>人波に消えて行く記憶の吐息</li>
    <li>愛のない一人舞台もう耐えきれない</li>
  </ul>
</div>
CSS
.demo ul:has( > :nth-child(5) ) {
  color: #ca0048;
  font-weight: 600;
}
<結果
  • 紅~kurenai~ X Japan
  •   
  • 吹き拔ける風にさえ目を閉じる
  •   
  • お前は走りだす何かに追われるよう
  •   
  • 俺が見えないのか すぐそばにいるのに
  •   
  • 人波に消えて行く記憶の吐息
  •   
  • 愛のない一人舞台もう耐えきれない

上手くX Japanの歌詞を紅に染められましたね。
「:has()」で直下の子要素に5個目が有ったらを指定して
5個以上子要素が有る時の指定をしています。

CSSで「:has()」を利用する時は、一度頭で考えてからじゃないと指定が難しいよね。

エンデ・バタローをフォローする
CSS

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて7年目になります。
エディタはAtomからVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました