CODEWITHSUNDEEP
csshtmlstyling
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59586

Scope of a css class applied to a div?

I would like to apply some special styling to a section of a page on my website.

I thought that by defining something like this:

h2.privacy_policy {
    color: #456123;
    padding: 10px 20px 30px 40px;
    margin: 40px 30px 20px 10px;
}

and by applying the class to a wrapping div:

<div class='privacy_policy'>
    <h2>Some text etc</h2>
    <p>More text ...</p>
    ...
</div>

the styling would apply to the enclosed h2 above, but Firebug tells me that no, the styling has not been applied.

What is the scope of applying a class to a div? Does it apply to enclosed elements? Am I having wrong expectations? Am I doing this wrong (if yes, what is the solution)? Am I doing this right and there must be something else happening (if yes where should I look at?)? Thanks.

Upvotes: 1

Views: 3031

Answers (3)

Widor
Widor

Reputation: 13275

h2.privacy_policy means "only h2 elements with a class of privacy_policy"

Upvotes: 1

0b10011
0b10011

Reputation: 18795

The CSS that matches your HTML:

h2.privacy_policy {}

or the HTML that matches your CSS:

<h2 class="privacy_policy">Text</h2>

Basically, imagine every space is a new level of hierarchy. So, h2 .privacy_policy matches a descendant of h2 that has a class of privacy_policy, while h2.privacy_policy matches h2 with class of privacy_policy.

Upvotes: 1

scibuff
scibuff

Reputation: 13755

wrong selector order ... you want 

div.privacy_policy h2

what you have

h2.privacy_policy

matches only h2 elements with class privacy_policy explicitly given

p.s. use double quotes for html tag attributes, i.e. <div class="privacy_policy"> rather than <div class='privacy_policy'>

Upvotes: 3

Related Questions