What does > in CSS mean?

Question

In the IUI css file, they use the following selectors:

body > *:not(.toolbar)
body > *[selected=\"true\"] 

What does the >, *:not() and *

Answer 1

• > - Child selector

  I.e.

  div > p > b {
   font-size:100px;
  }
  

  This will select all b tags inside p tags inside div tags.

• :not(..) - not selector

  Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.

  div:not(.toolbar)
  

  Will match any div that does not have the class toolbar

• [attr='val'] - attribute selector

  This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.

  input[checkec='true'] {
    background-color:red;
  }
  

You should Google CSS 2.1 selectors for more information.