The :not() selector in CSS3 seems to be ineffective on sibling elements

Question

The :not() selector in CSS3 seems to be ineffective on sibling elements

In my simple design, I have specified that text should appear in red unless it is within a footer element. This style is applied successfully to p tags, a tags, and others.

However, for some reason, the styling does not work when I target the footer tag.

Here is the code snippet:

p {
  color: #000000;
}

 :not(footer) {
  color: #ff0000;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

html css css-selectors

Answer 1

Answer №1

In order for :not(footer) to work, you must choose the parent element as body. Otherwise, footer will inherit the red color from body based on your specified rule.

Regarding the p element, it all comes down to CSS specificity.

p {
    color: #000;
}

body > *:not(footer) { /* note that having :not(footer) is the same as *:not(footer), the wildcard is not necessary */
    color: #f00;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<p>This is some text in a p element.</p>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

Answer 2

In order for :not(footer) to work, you must choose the parent element as body. Otherwise, footer will inherit the red color from body based on your specified rule.

Regarding the p element, it all comes down to CSS specificity.

p {
    color: #000;
}

body > *:not(footer) { /* note that having :not(footer) is the same as *:not(footer), the wildcard is not necessary */
    color: #f00;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<p>This is some text in a p element.</p>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

Answer 3

Answer №2

In order for the :not() selector to work properly, it is essential to have a parent element nested within it. In this case, the body tag acts as the parent element.

body > :not(footer){
  color: #ff0000;
}

Answer 4

In order for the :not() selector to work properly, it is essential to have a parent element nested within it. In this case, the body tag acts as the parent element.

body > :not(footer){
  color: #ff0000;
}

Answer 5

Answer №3

Your code snippet is as follows:

:not(footer) {
    color: #ff0000;
}

This code sets all elements to red, except for the footer.

The issue lies in the fact that this rule applies the red color to the body element, which then gets inherited by the footer.

Although your rule technically works (excluding the sibling), the footer still ends up getting the color through inheritance.

To avoid this inheritance loophole, target all children (excluding the footer) instead of all siblings. The revised CSS would be:

body > :not(footer) {
    color: #ff0000;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

Answer 6

Your code snippet is as follows:

:not(footer) {
    color: #ff0000;
}

This code sets all elements to red, except for the footer.

The issue lies in the fact that this rule applies the red color to the body element, which then gets inherited by the footer.

Although your rule technically works (excluding the sibling), the footer still ends up getting the color through inheritance.

To avoid this inheritance loophole, target all children (excluding the footer) instead of all siblings. The revised CSS would be:

body > :not(footer) {
    color: #ff0000;
}

<h1>This is a heading</h1>

<footer>This is a footer.</footer>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

The :not() selector in CSS3 seems to be ineffective on sibling elements

Answer №1

Answer №2

Answer №3

Similar questions

I'm encountering difficulties utilizing ternary operators in TypeScript

How can white space be maintained using <select> and <V-for> in Vue.js?

"Incorporating melodic undertones into your website design

Implementing pagination within an Angular 11 Mat-table with grouping feature

What is the best way to align and adjust the position?

Can the height of one div be determined by the height of another div?

Is it possible to create a QR Code using Ionic 5?

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

Uncertainty surrounding the extent of a button's scope within an Angular application

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

JQuery cannot target content that is dynamically inserted through an Ajax request

Sending Profile Picture and Description to PHP using AJAX and jQuery

Is there a way for me to update the button text and class to make it toggle-like

Reaching out to the Edge: Enhancing the jQuery Slider Experience

The dropdown CSS menu appears to be malfunctioning

React - CSS Transition resembling a flip of a book page

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

How do you toggle the visibility of a dependent <select> in an HTML form?

What advantages does withStyles offer that surpasses makeStyles?

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel