：（CSSセレクタ）ネジ付きセレクタ

Question

を扱う、私は次のコードを持っていない：

<div class="main-l"> 
    <table class="tbl"> 
    .. 
    </table> 
</div> 

を私は「メイン・リットルのTBL」クラスとテーブルを除外するために、次のCSSを使用しています：

table:not(.main-l .views-table) { 
    .. 
} 

私が気づいたのは、not：セレクタは、 '。main-l .views-table'を使用するかどうかに関係なく、クラス.views-tableを持つすべてのテーブルを除外します。

「.main-l .views-table」などのスレッド化クラスを持つものだけが除外されることを保証しますが、.views-tableクラスのみのものは除きます。

Answer 1

.tblは.main-lの子であるため、この方法では機能しません。 :not()セレクタは、要素自体でのみ機能し、親要素では機能しません。

あなたがこれを行う必要があります：

div:not(.main-l) .tbl { 
    ... 
} 

注意をCSSでdivを使用すると、避けるべきであることを、より良い.tbl-containerまたは類似のようなクラスを設定します。

Answer 2

.main-1が親要素なので、その要素にはnot()を使用して、それを埋め込んだ表を除外する必要があります。

table { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
*:not(.main-l) > table { 
 
    background: red; 
 
}

<div class="main-l"> 
 
    <table class="views-table"></table> 
 
</div> 
 
<table class="views-table"></table>

Answer 3

あなたは既にtableを参照しているが、あなたのセレクタはmain-lを使用することにより、外側divのクラスを参照しようとしています。

あなたは後にしているものを達成するために、次のいずれかを使用することができます。

table:not(.views-table) { 
    background: teal; 
} 

またはあなたが

div.main-l table:not(.views-table) { 
    background: teal; 
} 

.main-l table { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
table:not(.views-table) { 
 
    background: teal; 
 
} 
 

 
div.main-l table:not(.views-table) { 
 
    background: teal; 
 
}

<div class="main-l"> 
 
    <table class="tbl"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="main-l"> 
 
    <table class="views-table"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="main-l"> 
 
    <table class="tbl"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>