CODEWITHSUNDEEP
css
Bridget
Bridget

Reputation: 1

What is the difference between (for example) p.post {color: #336;} and .post p {color: #336;}?

I've always used this structure in the style sheet: 

.post {padding: 10px;}
.post h1 {color: #336;}
.post p {font-size: 1em;}

with this html:

<div class="post">
<h1>title</h1>
<p>content</p>
</div>

However, I frequently see this structure in style sheets:

h1.post {color:#336;}
p.post {font-size: 1em;}

with this html:

<h1 class="post">title</h1>
<p class="post">content</p>

I'm working on a theme that I will be giving to others, therefore, it's not enough that it works--I want it to reflect "best practices" (and keep me from appearing to be a total newbie).

My attempts to find an answer haven't been successful--perhaps because the search terms (element, selector, css, etc) are too broad.

Thank you in advance for any assistance.

(Also, an overdue thanks for past assistance. This is my first question, but not my first visit to the site.)

Upvotes: 0

Views: 375

Answers (2)

sciritai
sciritai

Reputation: 3758

As answered already but with some HTML examples. [] subbed for tags.

p.post - [p class="post"]Hello[/p]

.post p - [div class="post"][p]Hello again[/p][/div]

Upvotes: 0

John Feminella
John Feminella

Reputation: 311626

They specify slightly different things.

  • p.post matches a p element (and only a p element) that also has a class of post.
  • .post p matches a p element that is a descendent of another element that has a class of post.

The general term for the operators that combine or refine the elements to form a CSS rule is selectors or combinators. In CSS3 they're defined by this document. p.post is an example of the class selector, while .post p illustrates the descendant combinator.

Upvotes: 3

Related Questions