Question

I have some HTML that looks like this:

<h2>Heading</h2>
<div class='myClass'>
    <h2>Another Heading</h2>
</div>

Suppose that I want all h2 elements that are contained within a div with class myClass to be underlined.

What is the appropriate CSS selector for this? Note that this is for a static CSS file, not jQuery.

I’ve tried the following code, but it doesn’t work. Bonus points if you can tell me what this incorrect selector selects.

div.myClass > h2 { text-decoration: underline; }

Answer 1

That should work unless you have a problem with specificity (which it doesn’t look like, from the code) or you are using a very old browser.

In your case, this should do the same:

div.myClass h2 { text-decoration: underline; }

You might want to see if it works.

Also, if possible… share a http://jsfiddle.net or link to your code.