1

According to this source, when there are conflicting CSS styles on the same element, embedded styles override external styles but that is not what I have observed.

I have the following HTML (simplified):

<html>
<head>
  <link rel="stylesheet" type="text/css" href="foundation.min.css" />
  <style type="text/css">
  .dialog_error_container
  {
    display: none;
  }
  </style>
</head>
<body>
  <div class="dialog_error_container alert-box alert">...</div>
</body>
</html>

I was expecting to see the rule defined for .dialog_error_container taking precedence over the one for div.alert-box but I got the opposite result (see the image below)

enter image description here

Please explain to me why the embedded style doesn't override the external style.

Improve this question
1
  • I think it is because embedded css is not specific enough. You might wanna try. .dialog_error_container.alert-box.alert { display: none; } Commented Jan 5, 2013 at 2:39

4 Answers 4

Reset to default
4

There is no difference between external and embedded CSS—they’re both treated exactly the same. The reason it doesn’t override is because div.alert-box is more specific than .dialog_error_container. Breaking down the specificity:

  • div.alert-box gets a specificity of 0,0,1,1 because it has 1 class and 1 element.

  • .dialog_error_container gets a specificity of 0,0,1,0 because it has 1 class.

If the specificity of these two were the same then whichever one is defined last wins.

Note that it is generally best to make your CSS selectors have the lowest specificity possible, as this makes them easier to override.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

In calculating specificity, class and element selectors are not added. Here the specificities are 0,0,1,1 and 0,0,1,0. Check from the specs, or use the calculator css-specificity.webapp-prototypes.appspot.com
@JukkaK.Korpela That’s what I get for answering while tired—thanks!
3

That link is leading you astray. Embedded and external styles have the same level of specificity, it then comes down to the selector. In which case div.alert-box is more specific than .dialog_error_container

The easiest way to create the behaviour you're after with what you have is to change the embedded selector to div.dialog_error_container

Improve this answer

Comments

2

The source cited is in error. Check out the authoritative specification: CSS 2.1, clause 6.4.1 Cascading order. With respect to “origin”, both external and embedded style sheets are “author style sheets”. Thus, the next criterion is specificity, and .dialog_error_container (just a class selector) is less specific than div.alert-box (element type selector combined with class selector).

Using div.dialog_error_container instead would make the specificity equal. Then “sort by order” would step in, and the embedded style sheet would win – not by virtue of being embedded but due to being later (the style element in this case appears after the link element that refers to the external style sheet).

Thus, it would be safer (against future reorganizations of the style sheets) to make the specificity higher, e.g. by using body div.dialog_error_container (a bit artificial, but it works, and it’s better than using !important, which should be last resort only).

Improve this answer

Comments

1

Probably the external css overrides the embedded style because it is more specific; it has rules for div.alert-box, both an element and a class while the embedded style has .dialog_error_container, a class.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.