CODEWITHSUNDEEP
htmlcssclass
Mohamed Wagdy Khorshid
Mohamed Wagdy Khorshid

Reputation: 557

Nested CSS overrides element class

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.

Upvotes: 0

Views: 59

Answers (3)

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

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;
}

Upvotes: 1

Deepansh Singh
Deepansh Singh

Reputation: 158

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943118

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

Upvotes: 3

Related Questions