• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Engaged ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

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?

Views

438

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

This should work:

.class1:not(.class2 .class1) {

color: red;

}

 

Global browser support is 93%.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

quote

 

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???

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

quote
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 😉

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

LATEST
quote
quote
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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines