Best practice?

HTML & CSS
1

Given the following code:


<section id="latest_news">
	<header>
		<h1>Latest News</h1>
		<h2>News that matters</h2>
	</header>
	<article>
		<header>
			<h1><a href="#">Water tastes like burning!</a></h1>
		</header>
		<footer>
			<p>Article by: Nick Folley</p>
		</footer>
	</article>
</section>

How would you style the <h1> element in section->article->header->h1?

Would you just give it a class or id and reference it such as:


h1.article_h1 {
  color: #FFF;
}

Or would you give the article a class or id and lead to it:


article.main_article h1 {
  color: #FFF;
}

or would you do it some other way better then this?

2

You could just do

article h1 {}

unless there are going to be different heading colors for different types of articles.

3

Thanks for your input Ralph. The problem, which I didn’t clearly explain, goes like this.

Say you have the following CSS applied to the above snippet:


section#latest_news header h1 {
  color: red;
}

That’ll also apply to the element: section->article->header->h1 and not just the section->header->h1. Essentially the style will cascade down. Now it’s no big deal if you only have a few stylings that you can just overwrite but when you have a large amount of CSS stylings it sucks. So I ended up using a selector to keep it from affecting elements below:


section#latest_news > header h1 {
  color: red;
}

It makes sense to me but perhaps not the general wisdom. Any thoughts?