Is there a way to merge two :not() selectors together?

Question

Is there a way to merge two :not() selectors together?

Attempting to achieve the following:

:not(h1) > a,
:not(figure) > a {
    background: #859900;
}

Encountering an issue as figure>a is matching with :not(h1)>a, and h1>a is matching with :not(figure)>a. How can I merge these selectors?

css css-selectors

Answer 1

Answer №1

When combining two selectors with the :not() function, think of it as creating a selector for elements that do not match both classes, similar to how you would create a selector for elements that have both classes. For example, if you want to target elements that are NOT h1 AND NOT figure and then select their child anchor tags, you can use the following CSS code:

:not(h1):not(figure) > a {
  color: red;
}

<h1><a>Test</a></h1>
<p><a>Test</a></p>
<figure>
  <a>Test</a>
</figure>

Answer 2

When combining two selectors with the :not() function, think of it as creating a selector for elements that do not match both classes, similar to how you would create a selector for elements that have both classes. For example, if you want to target elements that are NOT h1 AND NOT figure and then select their child anchor tags, you can use the following CSS code:

:not(h1):not(figure) > a {
  color: red;
}

<h1><a>Test</a></h1>
<p><a>Test</a></p>
<figure>
  <a>Test</a>
</figure>

Answer 3

Answer №2

Utilize this method to merge multiple :not() selectors:

:not(img):not(p) > div {
    color: #FF5733;
}

<img>
   <div>
       Some text here
   </div>
</img>
<p>
   <div>
       Another set of text here
   </div>
</p>

Answer 4

Utilize this method to merge multiple :not() selectors:

:not(img):not(p) > div {
    color: #FF5733;
}

<img>
   <div>
       Some text here
   </div>
</img>
<p>
   <div>
       Another set of text here
   </div>
</p>

Is there a way to merge two :not() selectors together?

Answer №1

Answer №2

Similar questions

Having difficulty changing placeholder text style in Scss

The Facebook share button on my website is malfunctioning

Exploring the elimination of box shadow on elements that overlap

ways to create a separation between floated elements

apply CSS to highlight a clicked div as if it were a radio button

"Unlocking the power of Bootstrap modals in Django

Angular 2.0 in conjunction with D3.js does not style SVG elements using CSS

Is there a way to make a button on a single div only affect that specific div

Implementing a list using display: inline-block without any specified order

Ways to conceal a message button on a website when a user logs out

The challenge of resizing dialog elements in Angular Material

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Utilize flexbox for text wrapping while preserving the proportionate column width for varying text lengths

I am experiencing issues with my background image not fully expanding or displaying correctly in the html section. Any assistance with troubleshooting the background image would be greatly appreciated

Incorporate zoom feature into the jQuery polaroid gallery

Django has the ability to display images from static files, however, it is not capable of

Having trouble with CSS basics? Seeing properties change across multiple classes?

Customize CSS for Vimeo's HTML5 player

Looking to have the image float after reducing the size of the windows in html?

At 400 pixels screen size, the buttons in the appBar component are spilling out