Nested CSS overrides element class

Question

I have an html page with only one button

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="css1.css" type="text/css">
        <link rel="stylesheet" href="css2.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <button class="btn ovalbtn">
                Save
            </button>
        </div>
    </body>
</html>

And those are the 2 css classes used:

CSS1:

.container .btn {
    font-size: 4.0em;
}

CSS2:

.ovalbtn{
    font-size: 16px;
}

I wonder why the button aquires the font-size from CSS1 while I overrode it with another class in CSS2. I know it's related to css specificity but I have shallow knowledge in this area.

Quentin · Accepted Answer · 2015-11-05 09:33:02Z

3

It is due to specificity.

A class selector has a given level of specificity. Two class selectors are more specific than a single class selector. Thus rules in a rule-set with two class selectors (and nothing else) will overwrite rules for the same properties in a rule-set with a single class selector (and nothing else).

answered Nov 5, 2015 at 9:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Mohamed Wagdy Khorshid Over a year ago

You're right, adding ".container .ovalbtn" solves this. I actually couldn't find any article that says such rule. Thank for your help.

Quentin · Accepted Answer · 2015-11-05 10:07:22Z

1

Because in your CSS 1 button have more specific rule compare to CSS 2. If both CSS have .container class in their rule then your CSS 2 will effect to that button

So if you want to effect your CSS 2 then do one change pas per following :-

.container .ovalbtn {
    font-size: 16px;
}

edited Nov 5, 2015 at 10:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

answered Nov 5, 2015 at 9:34

Harsh Sanghani

1,7421 gold badge15 silver badges32 bronze badges

Comments

Deepansh Singh · Accepted Answer · 2015-11-05 09:36:38Z

0

The browser displays CSS1 because it is more specific than CSS2. When the browser sees different CSS codes changing the same element it applies the one which is more specific.

You can read about CSS Specificity here.

answered Nov 5, 2015 at 9:36

Deepansh Singh

1586 bronze badges

Collectives™ on Stack Overflow

Nested CSS overrides element class

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related