Kevin Powell - Community•6mo ago

CSS 👉🏼 What is the specificity of HTML elements with the style attribute?

Hello! I'm deep diving into how specificity is added to CSS selectors, and I became curious about this. Given the following code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Important and style attribute</title>
  <style>
    .red {
      background-color: red !important;
    }
  </style>
</head>

<body>
  <div style="background-color: blue !important" class="red">I'm important!</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Important and style attribute</title>
  <style>
    .red {
      background-color: red !important;
    }
  </style>
</head>

<body>
  <div style="background-color: blue !important" class="red">I'm important!</div>
</body>

</html>

The background-color of the <div> will be blue. But what is the criteria for this? Do HTML elements with the style attribute have a special criteria for them? Because when it comes to specificity, the class is more specific than the element (although it seems like that's not the rule that applies here) 🤔

5 Replies

Nandini•6mo ago

There are some sources where you can check the specificity like (specificity calculator)[https://specificity.keegan.st/]. the thing that you have done in your code is good for testing the specificity but we never write styling like this. The !important is at the first place when it comes to specificity. We generally use it when we are confused about the specificity in a larger project. inline styling is at the second place . (this is not used tho) now the

.red{}

.red{}

will be a better choice. umm...in this case the element will be blue because of two reasons the inline and the !important both are of the highest priority. You can check the specificity order online or even through any tutorial.:thumbup: I hope this helps

Kevin Powell•6mo ago

from lowest to highest specificity: 1. element selector 2. class selector 3. ID selector 4. inline style

ἔρως•6mo ago

if you set !important to a style thst isn't in the style attribute, it takes precedence however, you have !important in the style inside style which makes it take precedence over everything else

Pedro GarcíaOP•6mo ago

God bless you all guys. TYSM 😊

Rägnar O'ock•6mo ago

An important thing to note is that specificity is not the only thing that determines what value will be used for a property if it is set in multiple places. Other parameters are the origin (is the style coming from browser defaults? User styles? The page's style? An animation/transition?), scope with @scope and @layer and finally the order of appearance in a declaration. MDN has an in-depth article about all that here : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order

MDN Web Docs

Introduction to the CSS cascade - CSS | MDN

The cascade is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one origin, cascade layer, or @scope block set a value for a property on an element.

Gaming

Programming

CSS 👉🏼 What is the specificity of HTML elements with the style attribute?

Did you find this page helpful?