Which patterns used to select the element?

Question

I learn css3 selectors, and i can't understand what is the difference between the following selectors:

div > div 
div + div
div ~ div

Can somebody help me?

Answer 1

element>element for example : div > p Selects all

elements where the parent is a element

element+element for example :div + p Selects all

elements that are placed immediately after elements

element1~element2 for example : p ~ ul Selects every element that are preceded by a

element

see this like for all css selectors: https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

div > p Selects all p elements where the parent is a div element

div + p Selects all p elements that are placed immediately after div elements

p ~ ul Selects every ul element that are preceded by a p element

Here's a complete reference to all selectors https://www.w3schools.com/cssref/css_selectors.asp

A simple example

div > p{
color:blue;
}

div+p{
color:green;
}

#para ~ p{
color:red;
}

<div>
<p>Hello, im a child of div</p>
</div>

<p id="para">Hello, im adjacent to a div</p>

<p>Hello, im preceding to a div</p>