カテゴリー:
CSS
閲覧数:53 配信日:2023-12-05 12:39
このエントリーの結論
「隣接する直前要素」で「最初の要素以外」を指定する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を使いこなそう