4

I'm struggle with this, if i have these two tags combinations in my css:

aside h4 {
  color:yellow;
}

article h4 {
  color:blue;
}

and i apply them to following HTML

    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>

why Impackt On Marckets is blue, i thought it should be yellow ? I thought in this case tags should apply inside out, not the opposite. Is it something about the Article tag ?

.headline {
    color:red;
}

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

article h4 {
    font-style:normal;
    color:blue;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

tag

2
  • 1
    Side note: You can remove xmlns="http://www.w3.org/1999/xhtml", as it has no effect on your HTML. Read more.
    – Raptor
    Dec 15, 2015 at 8:29
  • Thanks for the advise. It is there because i copy-paste the html code from my Visual Studio and its there by default. Dec 15, 2015 at 8:42

4 Answers 4

1

This is because article h4 and aside h4 have equal specificity. Given they both have the same relevance the last rule in your CSS file will be used.

The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted. CSS rules that directly target an element will always take precedence over rules that an element inherits from an ancestor.

Specificity (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

If you switch their positions in CSS the text will be yellow.

.headline {
    color:red;
}

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

aside h4 {
    font-style: italic !important;
    color:yellow;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

1
  • No problem, glad I could help. Dec 15, 2015 at 8:35
1

your issue is due to CSS selectors specificity. You can read more here

So, in order to solve your problem you have to be just more specific when you declare your CSS rules. In your case you take this rule:

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

and add the .headline class, and the text become yellow

article h4.headline {
    font-style:normal;
    color:blue;
}

This is a fiddle with the new rule: http://jsfiddle.net/x73hne3v/

1
  • This is not about solving problem, i can change the color. The question was why the css work that way - and the answer is (THE LAST RULE in css). Anyway thanks for trying man. i appreciate that. Dec 15, 2015 at 8:35
1

It's because your article h4 CSS rule is at the bottom of the page - If you include aside h4 at the bottom, then it'll override the previous reference.

As mentioned by other people, use CSS specificity (be more specific with your CSS rules).

1
  • Its not about to be more specific with my css. Its a question, that i cannot answer and i do not understand why is that way. This css is not written by me. Anyway, thanks for help. Dec 15, 2015 at 8:40
0

I think in your css file you only need to change folllowing property.

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.