CSS :not() selector not working when targeting nested hierarchy [duplicate]





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1
















This question already has an answer here:




  • Multiple descendant children selector with css [duplicate]

    3 answers




I have a scenario where I want to target all tables (or any element) in the page / a container except those elements inside a special container or class (for
example .exempt-table) .



I tried it using :not() selector to target "All tables except those inside .exempt-table" as follows:



.container :not(.exempt-table) table { 
border: 5px solid red;
}


Here is the complete example:






div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>





Expectation is, border (red) should not be applied to Table2, Table4 because these tables are inside .exempt-table. But, the border applied to all tables except Table2 because Table2 is direct child if .container where as Table4 is just descendant.



27th Nov:
Updated the above example to address the issue with > table.










share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 12:16


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • you will need two selector for this

    – Temani Afif
    Nov 23 '18 at 12:16











  • Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

    – Mr Lister
    Nov 23 '18 at 12:17













  • Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

    – Prasanna Kumar
    Nov 27 '18 at 3:24













  • the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

    – Temani Afif
    Nov 27 '18 at 8:26


















1
















This question already has an answer here:




  • Multiple descendant children selector with css [duplicate]

    3 answers




I have a scenario where I want to target all tables (or any element) in the page / a container except those elements inside a special container or class (for
example .exempt-table) .



I tried it using :not() selector to target "All tables except those inside .exempt-table" as follows:



.container :not(.exempt-table) table { 
border: 5px solid red;
}


Here is the complete example:






div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>





Expectation is, border (red) should not be applied to Table2, Table4 because these tables are inside .exempt-table. But, the border applied to all tables except Table2 because Table2 is direct child if .container where as Table4 is just descendant.



27th Nov:
Updated the above example to address the issue with > table.










share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 12:16


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • you will need two selector for this

    – Temani Afif
    Nov 23 '18 at 12:16











  • Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

    – Mr Lister
    Nov 23 '18 at 12:17













  • Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

    – Prasanna Kumar
    Nov 27 '18 at 3:24













  • the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

    – Temani Afif
    Nov 27 '18 at 8:26














1












1








1









This question already has an answer here:




  • Multiple descendant children selector with css [duplicate]

    3 answers




I have a scenario where I want to target all tables (or any element) in the page / a container except those elements inside a special container or class (for
example .exempt-table) .



I tried it using :not() selector to target "All tables except those inside .exempt-table" as follows:



.container :not(.exempt-table) table { 
border: 5px solid red;
}


Here is the complete example:






div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>





Expectation is, border (red) should not be applied to Table2, Table4 because these tables are inside .exempt-table. But, the border applied to all tables except Table2 because Table2 is direct child if .container where as Table4 is just descendant.



27th Nov:
Updated the above example to address the issue with > table.










share|improve this question

















This question already has an answer here:




  • Multiple descendant children selector with css [duplicate]

    3 answers




I have a scenario where I want to target all tables (or any element) in the page / a container except those elements inside a special container or class (for
example .exempt-table) .



I tried it using :not() selector to target "All tables except those inside .exempt-table" as follows:



.container :not(.exempt-table) table { 
border: 5px solid red;
}


Here is the complete example:






div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>





Expectation is, border (red) should not be applied to Table2, Table4 because these tables are inside .exempt-table. But, the border applied to all tables except Table2 because Table2 is direct child if .container where as Table4 is just descendant.



27th Nov:
Updated the above example to address the issue with > table.





This question already has an answer here:




  • Multiple descendant children selector with css [duplicate]

    3 answers







div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>





div {
border: 1px solid blue;
padding: 5px;
}

div::before {
content: 'DIV';
}

.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>

<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>

</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>






css css-selectors






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 27 '18 at 6:20







Prasanna Kumar

















asked Nov 23 '18 at 11:26









Prasanna KumarPrasanna Kumar

394819




394819




marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 12:16


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 23 '18 at 12:16


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • you will need two selector for this

    – Temani Afif
    Nov 23 '18 at 12:16











  • Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

    – Mr Lister
    Nov 23 '18 at 12:17













  • Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

    – Prasanna Kumar
    Nov 27 '18 at 3:24













  • the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

    – Temani Afif
    Nov 27 '18 at 8:26



















  • you will need two selector for this

    – Temani Afif
    Nov 23 '18 at 12:16











  • Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

    – Mr Lister
    Nov 23 '18 at 12:17













  • Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

    – Prasanna Kumar
    Nov 27 '18 at 3:24













  • the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

    – Temani Afif
    Nov 27 '18 at 8:26

















you will need two selector for this

– Temani Afif
Nov 23 '18 at 12:16





you will need two selector for this

– Temani Afif
Nov 23 '18 at 12:16













Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

– Mr Lister
Nov 23 '18 at 12:17







Table 4 is also in a div without a class, which is a match for :not(.exempt-table). So you should avoid situations like those. You can use :not(.exempt-table) > table here.

– Mr Lister
Nov 23 '18 at 12:17















Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

– Prasanna Kumar
Nov 27 '18 at 3:24







Hi @TemaniAfif unlike the duplicated question where styles overridden, I dont the border to be applied at all for tables inside ".exempt-table' instead of applying to all and override again. Hope this make sense.

– Prasanna Kumar
Nov 27 '18 at 3:24















the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

– Temani Afif
Nov 27 '18 at 8:26





the duplicate explain that you cannot do this using one selector, that's why I added it as a duplicate. You can also follow the duplicate of the duplicate for more details

– Temani Afif
Nov 27 '18 at 8:26












1 Answer
1






active

oldest

votes


















-1














please try this style



<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>





share|improve this answer
























  • Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

    – Prasanna Kumar
    Nov 23 '18 at 11:42













  • @PrasannaKumar: This CSS code also work for more table please check

    – AddWeb Solution Pvt Ltd
    Nov 23 '18 at 11:46











  • this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

    – Prasanna Kumar
    Nov 26 '18 at 9:31




















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









-1














please try this style



<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>





share|improve this answer
























  • Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

    – Prasanna Kumar
    Nov 23 '18 at 11:42













  • @PrasannaKumar: This CSS code also work for more table please check

    – AddWeb Solution Pvt Ltd
    Nov 23 '18 at 11:46











  • this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

    – Prasanna Kumar
    Nov 26 '18 at 9:31


















-1














please try this style



<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>





share|improve this answer
























  • Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

    – Prasanna Kumar
    Nov 23 '18 at 11:42













  • @PrasannaKumar: This CSS code also work for more table please check

    – AddWeb Solution Pvt Ltd
    Nov 23 '18 at 11:46











  • this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

    – Prasanna Kumar
    Nov 26 '18 at 9:31
















-1












-1








-1







please try this style



<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>





share|improve this answer













please try this style



<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 23 '18 at 11:36









AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd

13.4k11439




13.4k11439













  • Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

    – Prasanna Kumar
    Nov 23 '18 at 11:42













  • @PrasannaKumar: This CSS code also work for more table please check

    – AddWeb Solution Pvt Ltd
    Nov 23 '18 at 11:46











  • this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

    – Prasanna Kumar
    Nov 26 '18 at 9:31





















  • Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

    – Prasanna Kumar
    Nov 23 '18 at 11:42













  • @PrasannaKumar: This CSS code also work for more table please check

    – AddWeb Solution Pvt Ltd
    Nov 23 '18 at 11:46











  • this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

    – Prasanna Kumar
    Nov 26 '18 at 9:31



















Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

– Prasanna Kumar
Nov 23 '18 at 11:42







Hi, I tried this working, but, this needs table to be immediate child of .exempt-table which may not be guaranteed in my case

– Prasanna Kumar
Nov 23 '18 at 11:42















@PrasannaKumar: This CSS code also work for more table please check

– AddWeb Solution Pvt Ltd
Nov 23 '18 at 11:46





@PrasannaKumar: This CSS code also work for more table please check

– AddWeb Solution Pvt Ltd
Nov 23 '18 at 11:46













this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

– Prasanna Kumar
Nov 26 '18 at 9:31







this is not working in case of <div class="exempt-table"> <div> <table> because table is not direct child of ".exempt-table"

– Prasanna Kumar
Nov 26 '18 at 9:31







Popular posts from this blog

"Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

Alcedinidae

Origin of the phrase “under your belt”?