CSS Selectors

A CSS selector selects the HTML element where you want to apply style.Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS (Cascading Style Sheet).

1. CSS Element Selector : The element selector selects HTML elements based on the element name.
   Example :
   <style>
   h1{
     text-align:center;
     color: #000000;
     vertical-align:middle;
     }
   </style>
2. CSS Id Selector : The id selector uses the id attribute of an HTML element to select a specific element.The id of an element is unique within a page, so the id selector is used to select one unique element.
   Example :
   <style>
   #item{
     text-align:center;
     color: #669933;
     vertical-align:middle;
     float:none;
     display:block;
    }
   </style>
    
3. CSS Class Selector : The class selector selects HTML elements with a specific class attribute. It is used with a period character .
   Example :
   <style>
   .product{
     text-align:center;
     color: #990066;
     vertical-align:middle;
     float:left;
    }
   </style>
    
4. CSS Universal Selector : The universal selector (*) selects all HTML elements on the page.
   Example :
   <style>
   *{
     text-align: left;
     color: #CC0033;
     vertical-align:top;
    }
   </style>
5. CSS Group Selector : The grouping selector selects all the HTML elements with the same style definitions.
   Example :
   <style>
   span, h1, p {
     text-align: left;
     color: #0033CC;
     vertical-align:middle;
    }
   </style>