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

means child element

.cont > div {
    color: #fff;
}

This would be:

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

Answer 2

• > means a direct child
• * is a universal selector (everything)
• :not() means anything except what's in the parentheses
• *[] means anything that matches what's in the brackets

In your case:

body > *:not(.toolbar)   // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.

See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.

Answer 3

> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.

*:not(.toolbar) matches any element that does not have the class .toolbar.

*[selected="true"] matches any element with the selected attribute equal to true.

Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.

Answer 4

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