CSSでクラスを付与されていない要素にだけCSSを当てたい

CSSでちょっとした小技をご紹介します。
出来ないかなと思って探してみたら、あるんですね！

とある事情があって、特定の要素内にある数多のタグのうち、クラスを振っていない要素にだけCSSを当てたい、という事になったのですが…

クラスなし要素にCSSを当ててから、クラスあり要素に対してそれを打ち消す設定をすれば…いいのかもしれないですが、
今回は要素なし、クラス（複数）ありが混在していて、事ある毎にリセットする記述を書き込んで…

て、もうこの時点でゴチャゴチャややこしいですね。
説明からしてややこしいですから、CSSの記述はほんと面倒です。
（後付けで必要になったから、そりゃあもう…）

さあ、サクッと本題に入りましょう。

記述自体は、とてもシンプルです。

【CSS】

〇〇:not([class]){/* スタイル *}

今流行りの（僕の中だけです）セレクタを使用しますが、いたってシンプルですね。

【サンプル】

<div class="sample_base">
	<p>クラス「sample01」テーブル</p>
	<table class="sample01">
		<tr>
			<th>見出し</th>
			<td>値1</td>
			<td>値2</td>
		</tr>
		<tr>
			<th>見出し2</th>
			<td>値3</td>
			<td>値4</td>
		</tr>
	</table>
	<p>クラス「sample02」テーブル</p>
	<table class="sample02">
		<tr>
			<th>見出し</th>
			<td>値1</td>
			<td>値2</td>
		</tr>
		<tr>
			<th>見出し2</th>
			<td>値3</td>
			<td>値4</td>
		</tr>
	</table>
	<p>クラスなしテーブル</p>
	<table>
		<tr>
			<th>見出し</th>
			<td>値1</td>
			<td>値2</td>
		</tr>
		<tr>
			<th>見出し2</th>
			<td>値3</td>
			<td>値4</td>
		</tr>
	</table>
</div>

今回は特定要素内（サンプルでいうdiv.sample_base）に、複数のtable（クラスあり）が混在していて、かつその中に、訳あってクラスを振れないtableを追加する必要が出て…

そこで、今回調べたセレクタの出番でした。

既存のクラスありtableには影響を与えずに、クラスなしtableにだけ、いろいろと加える事ができました。

ちょっとごちゃごちゃした使い方をしちゃいましたが、知っていれば何かと活用できるセレクタだと思います。

いちいちリセットするCSS書くの大変ですし。

【参照させて頂いたサイト】
https://gotohayato.com/content/451