I'm using a custom MovableType design (that I didn't build) and have seen this a few times:

div.new > a {
   background-color: #F5F5F5;

I tried this out in Firebug and I can't work out how it's any different to:

div.new a {
  background-color: #F5F5F5;

I'm not having much luck googling for the more-than symbol and it's not mentioned in the few tutorials I've scanned looking for it.

Is the latter just an implicit use of the > operator? Do they behave identically?

4 answers

This was chosen as the best answer

It only selects direct children of the element.

Whereas div.new a selects any a element inside div.new, div.new > a selects only a's that are direct children, ie. not inside a p or something.

Source: Quirksmode

Answered almost 10 years ago by Shaun Robinson

> means an immediate child so:

.parent .grandchild { color: blue; }
.parent > .grandchild { color: red; } /* this will be ignored below */

<div class="parent">
  <div class="child">
    <div class="grandchild">This will be blue</div>
Answered almost 10 years ago by sprugman

The CSS2 Selectors specification at W3C is actually fairly readable (for once) and has lots of good examples.

In this case here is their explaination:


There are other interesting selector options and most modern browsers now support the majority.

Answered almost 10 years ago by Liam Clancy (metafeather)

It specifies a parent-child relationship.

From 456 Berea Street.

Answered almost 10 years ago by Andrew Pennebaker