CODEWITHSUNDEEP
htmlcss
Stoyan Petkov
Stoyan Petkov

Reputation: 491

CSS Combinator issue

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

Upvotes: 4

Views: 68

Answers (4)

Bijal
Bijal

Reputation: 132

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

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

Upvotes: 0

Denis Tsoi
Denis Tsoi

Reputation: 10414

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).

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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>

Upvotes: 1

fbid
fbid

Reputation: 1570

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/

Upvotes: 1

Related Questions