Need help targeting all instances of a class EXCEPT when it's a child of another (specific) one

[Under S.]

Hi,

How do I target all instances of .class1 EXCEPT when it's a child of .class2? These instances would be protected from those CSS change, so only instances of .class1 that AREN'T children of .class2 would be affected.

Is there an easy syntax for this?

[osgood_]

This should work:

.class1:not(.class2 .class1) {

color: red;

}

Global browser support is 93%.

[L e n a]

Here at the studio we work quite a bit with GPT, so here is his answer :

The following CSS rule selects all elements of class .class1 that are not children of class .class2 :

.class1:not(.class2 > .class1) {
  /* Your styles here */
}

But that supose that .class1 are first child of .class2.

So, I asked GPT : "I thought that the pseudo-class :not could not contain a combination"

GPT get back :

You are right that the :not() pseudo-class cannot contain selector combinations, such as descendant, child, or sibling selectors. Therefore, if the elements of .classe1 are not direct children but nested one level deeper, the selector combination would not work with the :not() pseudo-class.

In this case, you can use another approach by combining selectors to select only the elements of .classe1 that are not descendants of .classe2.

Here is an example of a CSS rule that could work:

.classe1 {
  /* Your styles for all elements with .classe1 here */
}
.classe2 .classe1 {
  /* Your styles for all elements with .classe1 that are descendants of .classe2 here */
}
.classe1:not(.classe2) {
  /* Your styles for all elements with .classe1 that are not descendants of .classe2 here */
}

In this approach, we have defined two different sets of styles for the elements of .classe1:

• The base styles that apply to all elements with .classe1.
• The styles for elements with .classe1 that are descendants of .classe2.

Then, we have used the :not() pseudo-class to select all elements of .classe1 that are not descendants of .classe2, excluding the elements of .classe1 that are descendants of .classe2.

This way, the styles defined in the last rule will only be applied to elements of .classe1 that are not descendants of .classe2.

[osgood_]

GPT get back :

You are right that the :not() pseudo-class cannot contain selector combinations, such as descendant, child, or sibling selectors. Therefore, if the elements of .classe1 are not direct children but nested one level deeper, the selector combination would not work with the :not() pseudo-class.

By L e n a

This still works?

<div class="class2">
<div class="class3">
<div class="class8">
<div class="class1">Class 1</div>
</div>
</div>
</div>


Oh OK this doesnt:

<div class="class2">
<div class="class3">Hello</div>
<div class="class8">
<div class="class1">Class 1</div>
</div>
</div>



I get a bit confused with nested, decended, sibling etc!!!!

 Humm actually both examples above work.........so in what combination of html elements will :NOT not work???

[L e n a]

I get a bit confused with nested, decended, sibling etc!!!!

 Humm actually both examples above work.........so in what combination of html elements will :NOT not work???

By osgood_

Yes you’re right it works, and still works, but as we’re still in level 3, it is probably more secure to run as GPT told us https://w3c.github.io/csswg-drafts/selectors/#negation as you can see in level 3 only a single simple selector is allowed.

So thta’s why I asket GPT to write the alternate rules, …it will be probably more secure depending on browser's implementation.

I confess I was lazy on that one… still have to run on a case 😉

[osgood_]

I get a bit confused with nested, decended, sibling etc!!!!

 Humm actually both examples above work.........so in what combination of html elements will :NOT not work???

By osgood_

Yes you’re right it works, and still works, but as we’re still in level 3, it is probably more secure to run as GPT told us https://w3c.github.io/csswg-drafts/selectors/#negation as you can see in level 3 only a single simple selector is allowed.

So thta’s why I asket GPT to write the alternate rules, …it will be probably more secure depending on browser's implementation.

I confess I was lazy on that one… still have to run on a case 😉

By L e n a

 You think I trust what GPT has to say. Its like asking Mystic Meg what is happeing next year.

[B i r n o u]

I always like the way GPT answers and detailled all his proposal.
I can't wait to use it again in VSC
lol

[osgood_]

I always like the way GPT answers and detailled all his proposal.
I can't wait to use it again in VSC
lol

By B i r n o u

Is it actually correct though. I cant make out what it means. I've tried a few html combinations and its seems as though IF an element with the class name of class1 is inside a parent element with a class name of class2 the :NOT will work, regardless what else is in the parent and where it is.

[Nancy OShea]

You'll need to provide an example of what you mean because I can't think of one.

Tags containing more than one class are expressed in a single string like this Bootstrap example.

<nav id="topNav" class="navbar navbar-top navbar-expand-md navbar-dark bg-dark">

</nav>

In the above example, the tag <nav> containing unique ID "topNav" is the parent of ALL classes in the string.