🙅

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

2021/06/16に公開

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