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 *[] mean?

Thanks.

Answer 1

> 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 2

http://www.w3.org/TR/css3-selectors/

Answer 3

• > means a direct child
• * is a universal selector (everything)
• :not() means anything except what's in the brackets
• *[] means anything that matches what's in the square 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 4

Hi Marc,

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

Guido Tapia

Answer 5

Actually this is wrong, please disregard! :)

Should also be noted that the whitespace is important:

body > h1 /* matches all <h1> elements that are descendants (children) of body */
body>h1 /* matches all <h1> elements that are *direct* discendants of body */

Child Selectors