Five CSS Selector(+>~)

1. X Y

<div class="father">father
  <p class="child">child</p>
  <p class="child">child</p>
  <p class="child">child</p>
</div>

.father .child means all the 3 child selected.

2. XY (without space)

<div class="father">father
  <p class="smart child">child</p>
  <p class="child">child</p>
  <p class="child">child</p>
</div>

p.smart.child means <p> element which have these 2 class selected.

3. X+Y

Sibling selector.

<div class="father">father
  <p class="child1">child1</p>
  <p class="child2">child2</p>
  <p class="child2">child3</p>
</div>

.child1 + .child2 {
  background-color: yellow;
}

only child2 will become yellow.

4. X>Y

<div class="father">father
  <p class="child">child</p>
  <p class="child">child
  <div>
    <p class="child">child inside</p>
  </div>
  </p>

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

.father>.child means 3 <p> child will be selected, but <p> child inside is not included.

5. X~Y

Almost the with X+Y, but all the Y after X will be selected.

<div class="father">father
  <p class="child1">child1</p>
  <p class="child2">child2</p>
  <p class="child2">child3</p>
</div>

.child1 + .child2 {
  background-color: yellow;
}

For this example, child2 and child3 is yellow.