CSS3 selector issue

Question

I'm creating my contact page for my portfolio website and I'm having some problems with selectors. I have a good knowledge base of both HTML and CSS. And I'm now making the transition to HTML5/CSS3.

I'm having a problem doing any modifications to the h2 on the page. It seems when I try and target the h2 in CSS it doesn't make any changes. Am I missing something that needs to be added in because it's using HTML5 elements? Or am I just not using the correct DOM to the element to make changes? Any help would be appreciated.

<!-- HTML5 -->
<section>
    <h2 class="pages">Contact</h2>
<article>
</article>
</section>

<!-- CSS3 -->
section h2 .pages
{

}

Answer 1

jsFiddle here.

---

Your selector is slightly wrong, use this instead:

section h2.pages {
  color:red;
}

Edit:

Files in relation to comments:

http://www.speedyshare.com/2eSXY/contact.php

http://www.speedyshare.com/Z5exc/screen.css.css