More than 5 years have passed since last update.

CSSで同じ種類の要素のうち、特定の要素だけ適用しない方法。

Posted at 2017-07-14

概要

例えばページ内のdiv全部に適用しているスタイルがあるけど、このひとつだけは適用したくない！というときがありませんか？そんなときに使える方法をご紹介します。

否定擬似クラス":not"を使います。 divのうち、クラスが指定してあるものは適用しない例で書いてみます。スペースが入ると効かなかったりするので、注意してください。

div:not([class]) {
    width:300px;
    margin-bottom:20px;
}

クラス名で指定したければ、こう書きます。

div:not([class="test"]) {
    width:300px;
    margin-bottom:20px;
}

全てのulの中のliに適用したいが、クラスが指定してあるulの方には適用しない場合などは、
このように":not"のあとに記せばOKです。

ul:not([class]) li {
    width:150px;  
    margin: 0px;
    background-color:#ff0000;
}

最初からクラス指定でスタイルを書いてあれば問題ないのですが、あとから、ここだけ適用させたくない！いままでのページ全部クラスに置き換えるの大変... なんてときに使えますね！ "!important"で書き換えることはできますが、無しにしたいときの手段が思いつかず、この方法になりました。

アコーディオンを実装していて、全ページの中身のdivを"display:none"にしてたけど、
1ヶ所だけ表示している状態からスタートの仕様にしたかったときに、
大変困っていたので...

そんな体験からこの方法を見つけました。