What is the usage for # . > and space in CSS selectors?

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?

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".

• # selects an ID (<div id="something"></div> -> #something)
• . selects a class (<div class="something"></div> -> .something)
• > selects a child directly under a specific parent (<div><p></p></div> -> div > p)
• <space> selects descendants under the specified parent (<div><p id="one"></p><p id="two"></p></div> -> div #one