- 同じHTMLタグが2つ以上同じ要素内で使用されている
- または、後から追加され増えた
- 既存部分のHTMLは修正することができない
HTML
<ul> <li> <a href="#">記事タイトル</a> <a href="#" class="setting">設定</a> </li> </ul>
CSS
li > a:not(.setting){ //既存aタグの指定
display:block;
padding:5px;
color:black;
}
li > a.setting{ //追加された.settingだけの指定
position:absolute;
top:0;
right:0;
}「:not()」を使うことによって、上書きして無効化する必要がなく、より記述がシンプルにわかりやすくなります。
もう片方のaタグにクラスを付けて差別化せずに「:not()」をつけるだけで差別化が終了します。
