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

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

Dynamic flexibility for content scrolling across components

Animating the background of a div element using jQuery

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

Flexbox keeps elements on the same line without breaking

What is the method for attaching a div to another div using javascript?

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

A straightforward jQuery conditional statement for dynamically generated content

Opting for CSS3 transitions over jQuery animate

Adjusting the transparency of numerous elements using JavaScript or jQuery

What is the best way to enlarge a Material UI card?

Utilizing CSS in Angular applications

Is Next.js compatible with CSS caching?

Video tag with centered image

What is the best way to reposition an element to the end of its flexbox container?

Text that appears when you hover over specific locations within one image

The Google Map is not showing all the details

Adjusting font sizes for both multiline text within a <p> element and labels based on the number of lines

Tips for setting the style of child components in a ReactJS project with CSS modules, classNames, and JSX syntax

Tips for avoiding flickering in safari during @-webkit-keyframe animations