Override Inline Style with 11 Stacked IDs and a class

Question

So, if an inline style has a css specificity of 1000 and IDs have a specificity of 100, stacking 11 ID's with a class should override the inline style without using the !important declaration.

So, why doesn't this work? I thought CSS had a point system where the highest number wins.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #a > #b > #c > #d > #e > #f > #g > #h > #i > #j > #k > div.foo {
            background-color: red;
        }


    </style>
  </head>

  <body>
      <div id="a">
          <div id="b">
              <div id="c">
                  <div id="d">
                      <div id="e">
                          <div id="f">
                              <div id="g">
                                  <div id="h">
                                      <div id="i">
                                          <div id="j">
                                              <div id="k">
                                                  <div style="background-color: blue;" class="foo">FOOOO</div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

Indeed - I would not focus on CSS specificity point values, as they aren't always intuitive. — Matthew Lymer, Apr 18 '16 at 14:54
So, the CSS specificity algorithm doesn't sum all the point attributes where inline-style: 1000 id: 100 class: 10 element: 1 And then sort the added ones? It's basically sorted on 4 different buckets of inline, id, class then element? — sneilan, Apr 18 '16 at 14:55

score 1 · Answer 1 · answered Apr 18 '16 at 14:52

1

As far as I know you can't override inline CSS with ID's. However you could do something like this:

div[style] {
background-color: yellow !important;
}

answered Apr 18 '16 at 14:52

Matko95

43
7

score 1 · Accepted Answer · answered Apr 18 '16 at 14:54

No...because inline styling comes last in the 'cascade" and so it wins regardless of the specificity.

It can only be overriden by adding !important.

In fact that's all you'd need.

 div.foo {
   background-color: red !important;
 }

<body>
  <div id="a">
    <div id="b">
      <div id="c">
        <div id="d">
          <div id="e">
            <div id="f">
              <div id="g">
                <div id="h">
                  <div id="i">
                    <div id="j">
                      <div id="k">
                        <div style="background-color: blue;" class="foo">FOOOO</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Got it. So the algorithm itself sorts cascading on the individual selectors. It doesn't sort by adding the point values of the selectors and then sorting those. Therefore a million classes can never override an ID. — sneilan, Apr 18 '16 at 14:57
Essentially, yes. See this - https://jsfiddle.net/unnoyk65/1/ — Paulie_D, Apr 18 '16 at 14:58

Override Inline Style with 11 Stacked IDs and a class

2 Answers2