22

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

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

What does the >, *:not() and *[] mean?

Thanks.

Improve this question
2
  • 18
    if we have to skip questions that google can answer, we don't answer anything. We are here to collect and polish, not only to produce original content. Commented Oct 27, 2009 at 2:49
  • possible duplicate of What does ">" mean in CSS rules? Commented Jan 18, 2012 at 7:25

4 Answers 4

Reset to default
24

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

> means "is a child element of" - is this a direct child, or any child in the hierarchy? ie will <body><div><div class="toolbar"> still match?
Direct child only. "Any child" would be referred to as a "descendant", not a "child". Oh and you're welcome. =)
Excellent, therein lies my problem. Cheers
19
  • > 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.

Improve this answer

Comments

2

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

Improve this answer

Comments

2

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.