‘+’, ‘>’ and ‘~’ symbols in CSS Selector

‘>’  – Targets elements which are DIRECT children of a particular element.

div #container > p {
  border: 1pxsolidblack;
}

121

 

 

 

 

‘+’ – It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

div + p { 
   color: green
}
122
‘~’  – It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector
div ~ p{
background-color:blue;
}
123