css specificity and colour

Question

Please may someone explain why the text 'impact on market' is green as opposed to yellow? I was expecting this to be yellow

HTML

<div> 
   <h4> International news </h4>
   <article>
      <h4 class= "headline"> news develop</h4>
      <aside>
         <h4> impact on market </h4>
      </aside>    
   </article>
</div>

CSS

h4 {
   color:blue;
}

.headline {
   color:red;
}

article {
   color:black;
   font-style:normal;
}

aside h4 {
   font-style: italic !important;
   color yellow;
}

article h4 {
   font-style:normal;
   color: green;
}

Please include your actual CSS. This is not valid CSS.

BoltClock
– BoltClock

2014-08-21 18:20:39 +00:00
Commented Aug 21, 2014 at 18:20 — BoltClock
– BoltClock, Commented Aug 21, 2014 at 18:20

imtheman · Accepted Answer · 2014-08-21 18:30:33Z

2

It is because article h4 comes after aside h4 and their degree of specificity are equal. CSS files are processed from top to bottom and if another style comes along with an equal or greater specificity, then that will override the previous style.

You can use this:

side > h4 {
   font-style: italic !important;
   color yellow;
}


article > h4 {
   font-style:normal;
   color: green;
}

Where > means only affect direct descendants. This is typically better to use than !important, since !important is considered the very last resort.

Further reading on CSS specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/

Further reading on !important:
http://css-tricks.com/when-using-important-is-the-right-choice/

edited Aug 21, 2014 at 18:30

answered Aug 21, 2014 at 18:21

imtheman

4,8631 gold badge32 silver badges31 bronze badges

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

Comments

James Korden · Accepted Answer · 2014-08-21 18:23:52Z

1

The order in which you put them. The last one is the one written last, so therefore more important.

Try:

article aside h4 
{
font-style: italic !important;
color: yellow;
}

Specify the structure more.

Alternative, create a class.

<h4 class="level3"> impact on market </h4>

Then add

.level3
{
 color: yellow;
}

answered Aug 21, 2014 at 18:23

James Korden

6346 silver badges19 bronze badges

Comments

Carlos Calla · Accepted Answer · 2014-08-21 18:26:21Z

0

It is all about CSS weights, here

article h4

is overriding

aside h4

you can change order or edit the

aside h4

for

article aside h4

and it will work. Both will work, change order or edit the selector.

answered Aug 21, 2014 at 18:26

Carlos Calla

6,7262 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

css specificity and colour

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related