こういう場合は:not()を使おう

Yukimi Sato 175views 更新:2014年7月23日
  • 同じ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()」をつけるだけで差別化が終了します。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません