7

I have been reading about CSS the last couple of days, and searched the internet for this question.

Could anyone please explain me whats the difference between (~) and (>)?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mikkel Raicevic-Larsen
  • 81
  • 5

2 Answers2

7

General sibling means the element is after another element, where the child selector targets elements that are directly inside of certain elements.

Siblings:

HTML:

<div class="brother"></div>
<div class="sister"></div>

CSS:

.brother ~ .sister {
    /* This styles .sister elements that follow .brother elements */
}

Children:

HTML

<div class="parent">
    <div class="child">
        <div class="child"></div>
    </div>
</div>

CSS:

.parent > .child{
    /* This styles .child element that is the direct child of the parent element;
    It will not style the .child element that is the child of .child */
}
Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • 2
    Note that sibling combinators can only match *following* siblings, so for example if you have a `.sister` before a `.brother`, `.brother ~ .sister` won't match it. – BoltClock Apr 04 '14 at 16:45
  • @BoltClock Good catch, I left that detail out, I'll update my post now. – Dryden Long Apr 04 '14 at 16:45
  • 1
    Hmm, "immediately follow" - that would be the `+` (adjacent sibling) combinator. `~` matches any following siblings in the same parent. – BoltClock Apr 04 '14 at 16:47
  • Still not clear, What if the parent-child example had another
    after the immediate child. How would the difference be for the two selectors?
     – Mikkel Raicevic-Larsen Apr 04 '14 at 16:56
0

Some examples are shown below to show how the CSS selectors are used...
Example:

div>p

The above, selects all p elements where the parent is a div element Example:

p~ul

The above, selects every ul element that are proceeded by a p element

Mudassir
  • 1,136
  • 1
  • 11
  • 29