CSS HTML Selector vs Class selector

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?

What are you using to do the selection? native javascript? jquery? mootools? — Kristian
– Kristian, Commented Mar 16, 2012 at 18:23
can you create example for us on jsfiddle.net because as you define the thing so there is no need for any conflict. — sandeep
– sandeep, Commented Mar 16, 2012 at 18:26
There's probably more going on in your HTML than you're showing. If you switch .content{} to DIV{} you'll be affecting all DIV tags. It's possible some other DIV is conflicting. The second possible issue you're having is with other CSS and specificity issues. I enjoy this site for recalling specificity stuffandnonsense.co.uk/archives/css_specificity_wars.html — jmbertucci
– jmbertucci, Commented Mar 16, 2012 at 18:30

Guffa · Accepted Answer · 2012-03-16 18:29:28Z

5

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.

answered Mar 16, 2012 at 18:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

Collectives™ on Stack Overflow

CSS HTML Selector vs Class selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related