CODEWITHSUNDEEP
csscss-selectorscss-specificity
tjfwalker
tjfwalker

Reputation: 494

CSS selector cascading/specificity not working as expected

Details

I'm working in FirefoxDeveloperEdition and experiencing unexpected selector prioritization. I've read through the Smashing Magazine article "CSS Specificity: Things You Should Know" and, insofar as I can tell, have constructed the CSS selectors as they ought be in order to achieve the intended level of specificity for each. However, the wrong declaration is being cancelled out.

What's the issue, here? Have I not quite wrapped by head around the workings of selector specificity? Is this a bug? Or, something else?

Project Code (simplified)

/index.html

<head>
  <link href="css/style.css">
</head>
<body>
  <section class="hud">
    <section class="main float-l">
      <a href="#0" class="button">
        <div class="outer container">
          <div class="inner container">
            <p class="show"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
              View Details
            </p>
            <div class="arrow"></div>
            <p class="hide"> <!-- This text is meant to be white by the style declared at line 159. But, it's grey by line 61. -->
              Hide Details
            </p>
          </div>
        </div>
      </a>
    </section>
  </section>
</body>

/css/style.css

58  .hud > .main p /* I also tried `.hud > .main p:not(.button)` */
59    {
60      vertical-align:   middle;
61      color:            #7C7C7C; /* This grey is applied of the white of line 159. */
62    {

...

155 .hud > .main > .button
156   {
157     display:          block;
158     background-color: #986B99;
159     color:            #FFFFFF; /* This white should be applied, but is overridden by the grey of line 61. */
160     height:           36px;
161     margin:           20px 10px 10px;
162     padding:          8px 20px;
163     font-weight:      400;
164     text-decoration:  none;
165     text-transform:   uppercase;
166     border-radius:    2px;
167   }

Inspector

Tried .hud > .main > .button vs .hud > .main p
Firefox dev tools inspector showing overridden CSS

Also tried .hud > .main > .button vs .hud > .main p:not(.botton)
Firefox dev tools inspector showing overridden CSS

Upvotes: 3

Views: 1960

Answers (1)

MarcinJuraszek
MarcinJuraszek

Reputation: 125620

It's because first style matches the element and the second one is inherited from it's parent.

Specificity only plays its role when two selectors matches the same element. Not when it comes to style inheritance from parent elements.

You can see that on really simple example:

#myID {
  color: red;
}

p {
  color: green;  
}
<div id="myId">
  <p>Some text</p>
</div>

Even though #myId is more specific text is green because p selector matches that element directly and therefor is more important than color inherited from div.

To make p elements inside .button white you need:

.hud > .main > .button p {
    color: #fff;
}

Upvotes: 5

Related Questions