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.

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. — Stefano Borini, Oct 27 '09 at 02:49
possible duplicate of [What does ">" mean in CSS rules?](http://stackoverflow.com/questions/3225891/what-does-mean-in-css-rules) — Cody Gray - on strike, Jan 18 '12 at 07:25

score 24 · Accepted Answer · answered Oct 27 '09 at 02:38

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.

answered Oct 27 '09 at 02:38

Marc W

19,083
4
59
71

> means "is a child element of" - is this a direct child, or any child in the hierarchy? ie will
still match?
– Oct 27 '09 at 02:40
1

Direct child only. "Any child" would be referred to as a "descendant", not a "child". Oh and you're welcome. =) – Marc W Oct 27 '09 at 02:41
Excellent, therein lies my problem. Cheers – Oct 27 '09 at 02:44

score 19 · Answer 2 · edited May 30 '14 at 14:33

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

score 2 · Answer 3 · answered Mar 21 '13 at 00:09

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>

score 2 · Answer 4 · edited Nov 22 '11 at 21:45

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

What does > in CSS mean?

4 Answers4

Linked