selectors in CSS

1. Universal Selector(*for whole document):

   In the universal selector, we use the * symbol. star (*) means the whole document. The universal selector (*) selects all HTML elements on the page.

   Syntax:

   

   Input:

   

   Output:

   

   1. Individual Selector:

   The individual selector is used to select specific elements which we want to target a particular tag.

   Input:

   

Output:

1. Class and ID:

the class selector is denoted by dot (.), and select the exact "class" which we want to target. ID selector is denoted by hash(#) and is used to select a particular ID that we want to target.

Output:

1. and selector

and selector selects multiple class and ID which in HTML documents but all the conditions should be true.

Input:

output:

1. Combined selector:

   The combined selector will be used to select all the elements in HTML and separated by a comma(,).

   Input:

   

   Output:

   

   1. Inside an element selector:

      This will select all li elements which present inside the ul element and ul present inside the div. It will be notified by space.

      Input:

      

      Output:

      

      1. direct child selector:

         This will select only the p element which is a direct child selector to div.

         Input:

         

         Output:

         

         1. siblings selector(~+):

            adjacent sibling selector(+): This adjacent sibling selector will select the direct placed after the specified element.

            Input:

            

            Output:

            

            General sibling selector: This general sibling selector will be used to select all the elements after the specified element.

            Input:

            

Output:

1. pseudo selector:

   1. :: before: This pseudo selector is used to insert some content before the content of an element.

      Input:

      

      Output:

      

   1. :: after This pseudo selector is used to insert some content after the content of an element. same as before element.

   Input:

   

   Output:

   

2. ::hover: This selector adds a special style to an element when we move the cursor over it.

Input:

Output: