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;
}
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
.
css css-selectors
marked as duplicate by Temani Afif
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.
add a comment |
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
.
css css-selectors
marked as duplicate by Temani Afif
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
add a comment |
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
.
css css-selectors
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
css css-selectors
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
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
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
please try this style
<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>
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
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
please try this style
<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>
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
add a comment |
please try this style
<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>
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
add a comment |
please try this style
<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>
please try this style
<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>
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
add a comment |
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
add a comment |
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