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 8 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 8 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 8 years ago by Liam Clancy (metafeather)

It specifies a parent-child relationship.

From 456 Berea Street.

Answered almost 8 years ago by Andrew Pennebaker