Difference between shared combinator (~) and child selector (>) in css

Question

I read about CSS the last couple of days and searched the web for that matter.

Can someone explain to me what is the difference between (~) and (>)?

Answer 1

Shared brother means the element is behind another element, where the child selector targets the elements that are inside 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 */
}

Answer 2

The following are examples showing how to use the CSS selector ...
Example:

div>p

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

p~ul

, ul, p