In this article we will learn about the SELECTORS of CSS that help us to finding the elements in HTML.

|| SELECTORS IN CSS ||

Selector in CSS is used to target the elements which have to change or set the properties .

In simple words , CSS selector target the HTML elements for styling.

SELECTING of element is the first step to go through the styling of the web pages . It makes us easy to target single or multiple HTML elements.

SYNTAX

selector { property : value; }

           p { color : red }

In this all the paragraph elements (p) that are present in markup get selected.

CSS SELECTORS provide various type of selectors for targeting the HTML elements. Here , we go through only five of the selectors which were used more.

TYPES OF BASIC CSS SELECTORS

• The CSS element selector
• The CSS id selector
• The CSS class selector
• The CSS grouping selector
• The CSS universal Selector

Let's start to know about these selectors.

THE CSS ELEMENT SELECTORS

The CSS element selector is used to target the HTML element which contain simple tags such as <p>, <h1>, <div>, <nav>etc.

SYNTAX

elementSelector { property : value;}

   p { color : blue ; }

In this, all the p elements are selected for styling .

THE CSS id SELECTOR

The CSS id selector is used to target the HTML element which contain specific id attribute such as <p id= "button" >, <h1 id= "heading" >, <div id= "nav" >, <nav id= "navBar" >etc.

To target a HTML element with specific id attribute , write the tag element (p ) with (#) symbol followed by its id value e.g., p#button{ }.

SYNTAX

elementSelector#idValue { property : value;}

   p#button { text-align: center ; }
     #nav { font-size : 3px; }   // by default it takes all div element

In first line ,only the p element of id value button is selected.And the second is only the div of id value nav is selected.

THE CSS class SELECTOR

The CSS class selector is used to target the HTML element which contain specific class attribute such as <p class= "button" >, <h1 class= "heading" >, <div class= "nav" >, <nav class= "navBar" >etc.

To target a HTML element with specific class attribute , write the tag element (p ) with (.) symbol followed by its class value e.g., p.button{ }.

SYNTAX

elementSelector.classValue { property : value;}

   p.button { text-align: center ; }
      .nav { font-size : 3px; }    // by default it takes all div element

In first line, only the p element of class value button is selected. And the second one is the only div of class value nav is selected.

NOTE THAT - > By default, if div element having id and class attribute , then you simply write #classValue , .classValue respectively e.g., #nav, .nav .

THE CSS grouping SELECTOR

The CSS grouping selector is used to target the multiple HTML element at the same time to style with same properties.

Rather than giving same style to each individual HTML elements in CSS , to group selectors, separate each selector with a comma and minimize the code. To target multiple HTML element for giving same style , write all selectors separated by comma(,).

SYNTAX

selector1, selector2, selector3 { property : value;}

   p.button , h1 , #nav { text-align: center ; }

In this, the p element of class value button, h1 element , div of id value nav are selected together.

THE CSS universal SELECTOR

The CSS universal selector is used to target all the HTML elements. To target all HTML element for giving same style , star symbol (*).

SYNTAX

* { property : value;}

   * { text-align: center ; }

This is for selecting all HTML elements.