Difference between these css rules?

HTML & CSS
1

Hi All,

I’m just refreshing myself on CSS & got caught on this…

What would the difference be between:

.someclass h2 {
&
h2.someclass {
???

TIA, Dave

2

Hi Dave.

.someclass h2 { } would apply to a situation something like this:

<div [COLOR="#FF0000"]class="someclass"[/COLOR]>
  <h2>Heading</h2>
</div>

… whereas h2.someclass { } would apply to this situation:


  <h2 [COLOR="#FF0000"]class="someclass"[/COLOR]>Heading</h2>

Does that help?

3

Yes thanks, those examples explain well !
What terminology would you use to describe those two configuration ?
Thanks, Dave

4

In case one, you’ve got an H2 within an element with a class of someclass. This is called a descendent selector
In case two, you’ve got an H2 with a class of someclass. This is called a class selector.

Here’s a nice reference for all the different types of selectors from the W3C: http://www.w3.org/TR/CSS2/selector.html

5

Thanks for taking to time to explain that - Dave