属性セレクタと疑似クラスnotを利用してCSSプロパティをまとめる方法。

Question

（例）

(HTML)

<div class="ctr-01"> <legend></legend> </div> <div class="ctr-02"> <legend></legend> </div> <div class="ctr-03"> <legend></legend> </div> <div class="ctr-04"> <legend></legend> </div> <div class="ctr-05"> <legend></legend> </div>

(CSS)
.ctr-01 legend,
.ctr-02 legend,
.ctr-04 legend,
.ctr-05 legend {margin-bottom:.5em;}

「.ctr-03 legend」のみセレクタを適用させたくありません。
全てに該当させるなら、
[class|=ctr] legend {margin-bottom:.5em;}
と、なりますが、「.ctr-03」だけ除外させるにはどうしたらいいのでしょうか？

[class|=ctr] legend,
:not(.ctr-03 legend) {margin-bottom:.5em;}
では駄目でした。

よろしくお願い致します。

Answer 1

以下の書き方でいかがでしょうか?

[class*="ctr-"]:not(.ctr-03) legend {
  margin-bottom:.5em;
}

:not()の中に加えるのは、その要素についての記述のみ..、だったと思います。

Comments

[taka_oct092018]

new1ro様、回答ありがとうございます。

ご指導の通りのコードで無事に解決しました。
私自身は「not」擬似クラスの仕組みがよく分かっていませんでしたが、
今回ようやく理解出来ました。

Answer 2

欲しい回答とは異なるかと思いますが、適用したくない要素は他の要素と異なる"意味"を持っていると
思いますのでそれを別のクラスとして定義してstyleを反映させてはどうでしょうか。

例えばctr-0*がタブを表しその内03が選択中タブといった状態なら03にactiveクラスを付与し
そのクラスに好きなstyleを入れるといった具合です。

Comments

[taka_oct092018]

petmen029様、回答ありがとうございます。