the difference between subsequent sibling combinator (~ )and child selector (>) in css

Question

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 (>)?

Answer 1

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 */
}

Answer 2

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