Selectors! Types and difference

Basic Selectors:

1. Universal Selector: 
   *{ width: 100px; height: 100px; }

   1 2 3 4

   *{ width: 100px; height: 100px; }

2. ID, Class Selector
   #id{ width: 100px; height: 100px; } .class{ width: 100px; height: 100px; }

   1 2 3 4 5 6 7 8 9

   #id{ width: 100px; height: 100px; }   .class{ width: 100px; height: 100px; }

3. Element/ Tag Selector
   div, p, section{ width: 100px; height: 100px; }

   1 2 3 4

   div, p, section{ width: 100px; height: 100px; }

4. Attribute Selector
   a[href^="http"]{ color: red; } a[href^="https"]{ color: green; }

   1 2 3 4 5 6

   a[href^="http"]{ color: red; } a[href^="https"]{ color: green; }

5. Descendant Selector: Selects all elements(any level deep) that are under the selector. For ex. following code will select all the span elements that are inside div element.
   div span{ color: red; }

   1 2 3

   div span{ color: red; }

1. Child Selector: Selects all elements that are one level under the selector. For ex. following code will select all the span elements at first level that are inside div element.
   div > span{ color: red; }

   1 2 3

   div > span{ color: red; }

1. General Sibling: Selects all elements that are adjacent to the first selector. For ex. following code will select all the span elements that are adjacent to div element and are placed after div in the DOM.
   div ~ span{ color: red; }

   1 2 3

   div ~ span{ color: red; }

1. Adjacent Sibling Selector: Selects first element that is adjacent to the first selector. For ex. following code will select the first span element that is adjacent to div element and is placed after div in the DOM.
   div + span{ color: red; }

   1 2 3

   div + span{ color: red; }

NOTE: If any other element apart from span ex. p tag is between div and span then the above selector will not select anything