Question

What are the different usages for the #, ., and > symbols and what do they reference?

For example, I know these two:

div#id {}     // <div id="id" />
div.class {}  // <div class="class" />

However, there are others which I don’t understand:

div#id element
div#id>element
div#id.class
div#id .class
div#id>element#id .class

Any insights?

Answer 1

As pst says, you should really read up more on your own. I’ll add that you can experiment using Firebug or an online tool like jsFiddle to see live results. But I understand not everyone combines ID and class selectors, and the fact that your selectors are so similar and bunched like that can be confusing, so here goes:

The > symbol is called the child combinator, and is different from whitespace (the descendant combinator) in that > only looks one level deep in the DOM hierarchy.

Compare the first two selectors:

• div#id element /* With a space */

  Select an element
  which descends from (is contained anywhere within) a div of id="id".

  Would match either of these:

  <div id="id">
      <element />
  </div>
  

  <div id="id">
      <div class="class">
          <element />
      </div>
  </div>
  

• div#id>element /* With a > sign */

  Select an element
  which is a child of (is contained directly within) a div of id="id".

  Will only match this:

  <div id="id">
      <element />
  </div>
  

  But not this because there is an intermediate div.class occurring between element and div#id:

  <div id="id">
      <div class="class">
          <element />
      </div>
  </div>
  

Because the space represents the descendant combinator, it’s significant in CSS selector syntax (except when used between other combinators and simple selectors, e.g. E > F and E>F are the same).

Compare the next two selectors:

• div#id.class /* No spaces anywhere */

  Select a div of both id="id" and class="class".

  By omitting the space, you are chaining three things together:

  1. The element selector (div),

  2. The ID selector (#id), and

  3. The class selector (.class).

  Thus a single element must satisfy all three selectors in order to be targeted by its rule. In HTML, this means it has to have both attributes, like so: <div id="id" class="class">

• div#id .class /* With a space */

  Select any element of class="class"
  which descends from a div of id="id".

  Notice the whitespace separating div#id and .class. This means .class applies to a totally different element.

  Would match either of these:

  <div id="id">
      <p class="class"></p>
  </div>
  

  <div id="id">
      <div>
          <p class="class"></p>
      </div>
  </div>
  

  But nothing here will be matched because there’s no .class to look for within div#id:

  <div id="id">
      <element />
  </div>
  

  And not this either, for the same reason:

  <div id="id" class="class"></div>
  

The last selector just involves putting it all together:

• div#id>element#id .class

  Funnily enough, the corresponding HTML structure would be invalid because you can’t have more than one element with the same ID, but anyway:

  Select any element of class="class"
  which descends from an element of of id="id"
  which is a child of a div of of id="id".