🙅

cssで「〜以外の要素」を指定したいとき

2021/06/16に公開

CSS

CSSには「:not()」という、擬似クラスが存在している。（否定擬似クラスという）
これは、指定されたセレクターに一致しない要素に対し動作します。

あんまりこんな単純な構造では使用しないかもしれませんが…

例

huga.html

<ul>
	<li>1 リストリスト</li>
	<li>2 リストリスト</li>
	<li class="hogehuga">3 リストリスト</li>
	<li class="hogehuga">4 リストリスト</li>
	<li>5 リストリスト</li>
	<li class="hogehuga">6 リストリスト</li>
</ul>

hoge.scss

li{
	color: #000;
	padding: 10px 30px;
	
	&:not(.hogehuga) {
		color: red;
	}
}

結果

class「hogehuga」がついた要素以外の文字が赤くなる

できないこと

入れ子にすることができません。notの中にnotがいれられない
before・afterは入れられない。li:not(.hogehuga::before)とかができない

例

結果

できないこと

Discussion