CSS Selector

CSS Selector: There are some selectors used in CSS, which allows us to choose the content we wish to style. Various selectors are considered as the separation of the set of CSS rules. They choose elements of HTML based on its class, type, id, and attribute.

Here are some selector types in CSS which are as follows:

• Element Selector
• Id Selector
• Class Selector
• Universal Selector
• Group Selector

Element Selector

The element selector of CSS is used to select the element of HTML by the name. The example of element selector is as follows:

<!DOCTYPE>
 <html>
 <head>
 <title> Element Selector of CSS </title>
 <style>
 p {
 color: grey;
 text-align: center; 
 }
 </style>
 </head>
 <body>
 <p> This is an example of Element Selector </p>
 <p> hellow! </p> 
 </body>
 </html> 

Output:

Id Selector

This selector of CSS selects the HTML element’s attribute id to choose a particular element. The id is always considered special inside the page. Thus, it is selected to choose a unique and single element. The id is defined with a hash character (#), pursued by the element’s id.

The example of id selector is as follows which is defined with id “p”:

<!DOCTYPE>
 <html>
 <head>
 <title> ID Selector of CSS </title>
 <style>
 #p { 
 color: blue;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <p id="p"> ID Selector </p> 
 <p> This is not troubled via the style </p>
 </body>
 </html> 

Output:

Class Selector

These selectors choose the elements of HTML along with a particular attribute of class. A class selector can be used with the period character (Full stop). It is pursued by the name of the class. Usually, a class must not be begin with the number.

The example of the class selector is shown below:

In this, a class is represented by “class1”:

<!DOCTYPE>
 <html>
 <head>
 <title> Class Selector of CSS </title>
 <style>
 .class1 { 
 color: red;
 text-align: center;
 }
 </style>
 </head>
 <body> 
 <h1 class="class1"> Class Selector </h1>
 <h2 class="class1"> This is an example of Class Selector </h2>
 </body>
 </html> 

Output:

Specific Element Selector: To define a specific element of troubled HTML, we can use the name of the element with the class selector.

Following is an example for selecting a specific element:

<!DOCTYPE>
 <html>
 <head>
 <title> Specific element Selector of CSS </title>
 <style>        
 h1.class1 {  
 color: brown; 
 text-align: center;
 }
 </style>
 </head>
 <body> 
 <h1 class="class1"> Specific Element Selector </h1>
 <p class="class1"> This is an example for selecting a specific element </p>
 </body>
 </html> 

Output:

• Various elements of HTML can also be referred to as one or more classes.

Example:

In the following example, element <p> is written according to the class=”class1” and to the class=”large”:

<!DOCTYPE>
 <html>
 <head>
 <title> One or More class Selector</title>
 <style>            
 p.class1 { 
 color: blue;
 text-align: center;
 }
 p.large {
 font-size: 200%;
 }
 </style> 
 </head>
 <body>
 <h1 class="class1"> One or More Class Selector </h1>
 <p class="class1"> This is an example for selecting one or more elements </p>
 <p class="class1 large">This is a paragraph which will be blue, center-aligned, and written in a large font-size. </p> 
 </body>
 </html> 

Output:

Universal Selector

CSS has a unique kind of selector i.e., universal selector. It is applied on the elements as the wildcard character. These selectors select every element which is displayed over the page.

The example of universal selector is as written as below:

<!DOCTYPE>
 <html>
 <head>
 <title> Universal Selector</title>
 <style>             
 * {
 color: red; 
 font-size: 20px;
 }
 </style>
 </head>
 <body>
 <h1> Universal Selector </h1>
 <p> This is an example for selecting all the elements available on the page </p> 
 <p id="class1">This is a paragraph which will be blue, center-aligned, and written in a large font-size. </p>
 <p>hello!</p>
 </body>
 </html> 

Output:

Group Selector

Various group selectors of CSS are applied to select every element including similar style definitions. A lengthy code can be reduced by the use of the group selectors. Commas can be used to isolate all the selectors in the grouping.

Take a look on the following code i.e., written without the use of group selector:

h1 {
 color: red;
 text-align: center;
 }          
 h2 {
 color: red; 
 text-align: center;
 }
 p {
 color: red;
 text-align: center;
 } 

We need to describe the properties of CSS for every element. These properties are grouped in the following ways:

h1,h2,p {
 color: red;
 text-align: center;
 }                  
 Let’s take a complete example of group selector which is as follows:
 <!DOCTYPE>
 <html>
 <head> 
 <title> Group Selector of CSS </title>
 <style>            
 h1,h2,p {
 color: red; 
 text-align: center;
 }
 </style> 
 </head>
 <body>
 <h1> Group Selector </h1>
 <h2> This is an example of Group Selector </h2>
 <p>This is not affected</p> 
 </body>
 </html> 

Output: