> and ~ expressions in CSS

Question

What is the purpose of ~ and > in CSS? For example what does the following expression mean?

:checked ~ label ~ .content > *

I recommend you read this article, is very useful: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ — Alex, May 24 '12 at 12:03
Has a couple of mistakes, though. The `*` section calls the descendant selector a child selector (but correctly labels it in its own section), and it calls `:before` and `:after` pseudo-classes when it later uses the CSS3 pseudo-element notation for `::first-line` and `::first-letter` (?!). — BoltClock, May 24 '12 at 12:26
See also http://stackoverflow.com/questions/4459821/css-selector-what-is-it/4459872 — Spudley, May 24 '12 at 20:55

score 16 · Accepted Answer · edited May 23 '17 at 12:09

Your selector means:

Select any element
that is a child of an element with the class content
which follows a label
which in turn follows a :checked input element.

> is the child combinator. It selects elements that are children of a certain parent element. Unlike the space (the descendant combinator), it only selects immediately-nested elements. See this answer for an illustration on how it works.

~ is the general sibling combinator. It selects elements that follow after other elements within the same parent (i.e. are siblings). Unlike + (the adjacent sibling combinator), it doesn't require an element to immediately follow another in the same parent. Compare the illustration below to this other answer which covers the + combinator.

Be careful, as the ~ combinator does not just select any sibling element. It only selects an element that comes after its sibling, so :checked ~ label will not match a label that occurs before the checked input element.

An illustration:

<section>
    <input type="radio" name="example1" value="1" checked>
    <label>1</label>
    <input type="radio" name="example1" value="2">
    <label>2</label>
    <input type="radio" name="example1" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [1] Selected -->
        <p>Some text              <!-- [1] Selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [1] Selected -->
    </div>
</section>

<section>
    <input type="radio" name="example2" value="1">
    <label>1</label>
    <input type="radio" name="example2" value="2">
    <label>2</label>
    <input type="radio" name="example2" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [3] Not selected -->
        <p>Some text              <!-- [3] Not selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [3] Not selected -->
    </div>
</section>

What's selected and what's not:

Selected
This h3 or p element is located directly inside a .content parent element. That .content element follows at least one label, and this label occurs after at least one input element that is :checked.

Note that any of the radio buttons here can be checked, and the elements will match, because as mention above ~ doesn't require a label to follow it immediately. Also, given the structure, either one of the ~ selectors can be swapped out for a +:
```
:checked + label ~ .content > *
:checked ~ label + .content > *
```
But this selector:
```
:checked + label + .content > *
```
Will only match if the third radio button is checked, because it's the only one that's immediately followed by a label and the .content element.
Not selected
This em element is nested within one of the p elements which is itself contained within .content. Based on the illustration here, it won't be selected as it's not a child of .content.
Not selected
Unlike in [1], none of the label elements in this section follow any :checked input element. Therefore, nothing is selected here, because it doesn't satisfy :checked ~ label.

Good answer. Note that reading this top-to-bottom is analogous to *reading the selector right-to-left*. — Jeroen, May 24 '12 at 12:06
@Jeroen: Yep, I link to another example in [my comment here](http://stackoverflow.com/posts/comments/8842448). And thanks, I've also souped it up with an illustration, which I used to do and miss doing so, so much! — BoltClock, May 24 '12 at 12:21

score 6 · Answer 2 · answered May 24 '12 at 12:03

6

Cf. http://www.w3.org/TR/selectors/:

E ~ F an F element preceded by an E element
E > F an F element child of an E element

answered May 24 '12 at 12:03

knittl

246,190
53
318
364

score 2 · Answer 3 · answered May 24 '12 at 12:12

:checked is a pseudo class for radio buttons or checkboxes http://reference.sitepoint.com/css/pseudoclass-checked

~ is the general sibling selector

:checked ~ label selects the label that comes after a selected checkbox or radio button (there can be any number of elements between the two, but they are on the same level and the label comes after the selected checkbox or radio button)

:checked ~ label ~ .content selects an element which had the class content and comes after the label described above (again, there can be any number of elements between them)

> is the child selector http://www.w3.org/TR/CSS2/selector.html#child-selectors

:checked ~ label ~ .content > * selects any child of the element described above

score 1 · Answer 4 · edited May 24 '12 at 12:52

1

* all elements
:checked input checked status
. class name
> under element

http://w3schools.com/cssref/css_selectors.asp

This page will be useful for you

edited May 24 '12 at 12:52

BoltClock

700,868
160
1,392
1,356

answered May 24 '12 at 12:04

Bora Alp Arat

2,185
3
16
21

> and ~ expressions in CSS

4 Answers4

Linked