All geek questions in one place

CSS Combination Problem

I am struggling with this if I have these two tag combinations in my css:

aside h4 {
  color:yellow;
}

article h4 {
  color:blue;
}

and I apply them to the following HTML

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

Why is Impackt On Marckets blue , I thought it should be yellow? I thought that in this case the labels should be applied inside out, and not vice versa. Is this something like an 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>
Run code

tag

+4
source share
4 answers

This is due to the fact that article h4they aside h4have the same specificity. Given that both are equally relevant, the last rule in your CSS file will be used.

- , CSS, . , CSS. . CSS, , , .

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

CSS, .

.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>
+2

CSS-.

, , , CSS. :

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

.headline,

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

: http://jsfiddle.net/x73hne3v/

+1

This is because your CSS rule article h4is at the bottom of the page. If you include aside h4below, it will override the previous link.

As mentioned by other people, use the CSS spec (more specifically, with your CSS rules).

+1
source

I think that in your css file you only need to change the following property.

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

0
source

Source: https://habr.com/ru/post/1620065/

More articles:


All Articles