目次一覧
状態:結論(後で見返す用)
閲覧数:170
投稿日:2023-12-05
更新日:2023-12-23
このエントリーの結論 / 具体例 / リンク
このエントリーの結論 / 具体例 / リンク
このエントリーの結論
「隣接する直前要素」で「最初の要素以外」を指定するCSSセレクタ
囲う要素 直前要素:not(:first-child):has(+ 直後要素){}
具体例
前提となるhtml
<div class="thumbnail">
<hr> <!-- 対象外 -->
<h2></h2>
<hr> <!-- 対象 -->
<h2></h2>
</div>
「隣接するh2要素の直前要素hr」で「.thumbnailクラス内の最初のhr要素以外」を指定するCSSセレクタ
.thumbnail hr:not(:first-child):has(+ h2){
background: #f0f8ff url(/img/pattern.png) repeat top left;
height:1em;
}
リンク
CSSで直前の要素を指定する方法!:has()セレクタと隣接セレクタを併用して対応できる
最初以外の要素にCSSを当てるには?:not()と:first-childを使いこなそう