The CSS specificity of a nested HTML element with no explicitly defined styles

Question

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000.

I am familiar with CSS specificity rules for specified selectors, however, I have not previously considered the impact of styling on elements nested within other elements. Could you please direct me to where in the W3C spec this behavior is outlined? (or any other reliable source)

HTML:

<!DOCTYPE html>
<html>
  <body>
     <div>Hello, this is an <em>important</em> announcement.</div>
  </body>
</html>

CSS:

* { color: #ff0000; }
div {color: #000000; }

css css-selectors

Answer 1

Answer №1

By using the * selector, you are targeting all elements in your document. This essentially means:


div {
   color: red;
}

em {
   color: red;
}

/* And so on... */

Check out the Demo for reference.

This will result in applying a red color to all elements because you have specified red as the color for all elements.

However, despite specifying red, your div appears black due to the specificity of the element selector being used which is more specific than the * selector that is least specific.

If you want your em element to be black, you should use the following code: Demo


em {
   color: inherit;
}

To be even more specific, you can use:


div em {
   color: inherit;
}

Answer 2

By using the * selector, you are targeting all elements in your document. This essentially means:


div {
   color: red;
}

em {
   color: red;
}

/* And so on... */

Check out the Demo for reference.

This will result in applying a red color to all elements because you have specified red as the color for all elements.

However, despite specifying red, your div appears black due to the specificity of the element selector being used which is more specific than the * selector that is least specific.

If you want your em element to be black, you should use the following code: Demo


em {
   color: inherit;
}

To be even more specific, you can use:


div em {
   color: inherit;
}

Answer 3

Answer №2

The color of an element will only be inherited from its parent if there are no rules specifying a different color.

When using the * selector to style elements like em, the color will default to #ff0000. The * selector, which matches every element, is a powerful tool. In the given example, it's akin to explicitly stating:

em { color: #ff0000; }
div {color: #000000; }

Answer 4

The color of an element will only be inherited from its parent if there are no rules specifying a different color.

When using the * selector to style elements like em, the color will default to #ff0000. The * selector, which matches every element, is a powerful tool. In the given example, it's akin to explicitly stating:

em { color: #ff0000; }
div {color: #000000; }

Answer 5

Answer №3

This is not related to nesting at all. In fact, you have two rules here. One rule states that div elements should be colored in #000, while the other rule specifies that all elements should be colored in #f00. The first rule does not affect your em element (since it's not a div), but the second one does overwrite the default inherit value with #f00.

When it comes to specificity and nesting, the specificity values along the path are simply added together.

Answer 6

This is not related to nesting at all. In fact, you have two rules here. One rule states that div elements should be colored in #000, while the other rule specifies that all elements should be colored in #f00. The first rule does not affect your em element (since it's not a div), but the second one does overwrite the default inherit value with #f00.

When it comes to specificity and nesting, the specificity values along the path are simply added together.

The CSS specificity of a nested HTML element with no explicitly defined styles

Answer №1

Answer №2

Answer №3

Similar questions

How to dynamically adjust font size using Javascript

Incorporating Bootstrap Content: A Guide to Including a PHP File within Another PHP File

Centralizing images in a Facebook gallery/lightbox during the loading process

Parallax Effect Slows Down When Scrolling In Web Page

Looking for assistance with HTML/CSS code

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

Creating a container that matches the dimensions of its neighboring container without using relative or absolute positioning

Issue with the button border not functioning correctly upon hover

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

Icons from Material Design Lite are not appearing as expected when integrated into an Angular project

Create a Boostrap navbar with a form and links aligned to the right using the navbar

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

Looking to incorporate nested rules in `JSS` using `CSS`?

Customizing a responsive background image within a div using Bootstrap 3

What is the best way to apply a background image to a DIV element using CSS

Adaptive component transformation

What is the best way to emphasize this specific section of text?

Troubleshooting CSS compatibility issues in Firefox browser (or HTML rendering as plain text)

Creating an inclusive h1 header with a logo: A step-by-step guide