Question

Hello,
I have seen a strange behavior while using CSS HTML selector and class selector.
in HTML file I have this code:

<div class="content">
    <h1>Registration Form</h1>
</div>

And in Css file I have:

.content
{
    margin:auto;
    width:600px;
    border:solid 1px black;
    background-color:White;
    padding:10px;
}

h1
{
    color:Gray;
    font-size:18px;
    border-bottom:solid 1px orange;
}

Above code works perfectly.
When I changed h1 HTML selector to Class selector by writing .h and h1 class="h" STILL it worked perfect.

BUT
when I changed .content class selector to div (ie I converted class selector of div tag to DIV HTML selector ITSELF) then the output changed.
It did not show me the text Registration form at all and showed horizontal lines above and below the area where Registration form text would be present.
why is this strange behavior?

Does it proves that class selector and HTML selector behave differently even if applied with SAME style rule effect?

Answer 1

A class selector is more specific than a type selector.

When you change the type selector to a class selector, the first selector still has precedence, just because it comes first.

When you change the first class selector to a type selector, the second selector becomes more specific, and takes precedence.