指定したセレクタに一致しない要素に対して、スタイルを適用(:not())
infinitewave特定の要素に対してのみスタイルを適用する方法は、nth-child()などを含め、色々と存在するが、:not()という疑似要素を使用することでも実現することが可能。
今回は、:not()の使用方法についてまとめてみる。
HTMLソースを準備
以下のようなHTMLソースを準備する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEMO</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p class="demo">
<span>テキスト01</span>
<span>テキスト02</span>
</p>
<p class="sample">
<span>テキスト03</span>
</p>
</body>
</html>擬似要素(:not())の設定
CSS側で以下のように記述。
.demo {
padding: 2px 5px;
background-color: rgb(237, 199, 123);
}
/* demoという名前のclass属性が設定されていないp要素に対し、スタイルを適用 */
p:not(.demo) {
font-weight: bold;
background-color: aquamarine;
}基本的な書き方は以下の通り。
セレクタ名:not(任意のセレクタ名) {
/* スタイルを記述 */
}動作確認
以下のように、指定したセレクタをもつ要素以外には、スタイルが適用されていなければOK。
Follow me!
