CSS Selectors

CSS selectors define on the HTML elements according to , id, class, type, attribute etc.

There are different types of selectors in CSS that is.

CSS Class Selector
CSS Id Selector
CSS Element Selector
CSS Universal Selector
CSS Group Selector

1) Class Selector

Class Selector are used to full stop symbol (.)

Selects the elements that have the given class attribute.

Syntax:-

Example1:-

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.head {  
    text-align: center;  
    color: red;  
}  
.k {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="head">This heading,  red Color.</h1>  
<p class="k">This paragraph, blue Color .</p>   
</body>  
</html>  

Test it Now

Output:

This heading, red Color.

This paragraph, blue Color.

2) Id Selector

Id Selector are used to hash character (#) symbol .

Selects an HTML element based on the value of its id attribute

Syntax:-

Example2:-

<!DOCTYPE html>    
<html>    
<head>    
<style>    
#head {    
    text-align: center;    
    color: red;    
}    
#k {    
    text-align: center;    
    color: blue;    
}    
</style>    
</head>    
<body>    
<h1 id="head">This heading,  red Color.</h1>    
<p id="k">This paragraph, blue Color .</p>     
</body>    
</html>    

Test it Now

Output:

This heading, red Color.

This paragraph, blue Color.

3) Element Selector

Element selector selects the HTML element by the name.

Syntax:-

Example3:-

Example:-

 <!DOCTYPE html>    
<html>    
<head>    
  <title> CSS Syntax</title>   
      <style> 
            h1 {
                color: blue; text-align: center;
                } 
       </style>
</head>    
<body>    
     <h1>What is CSS ?</h1>        
</body>    
</html> 

Test it Now

4) Universal Selector

Universal selector are used to a wildcard character (*). It selects all the HTML elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
* {
   color: green;
   font-size: 20px;
} 
</style>
</head>
<body>
<h2>HTML</h2>
<p>CSS</p>
<p id="para1">JavaScript</p>
<p>PHP</p>
</body>
</html>  

Test it Now

Output:

HTML

CSS

JavaScript

PHP

5) Group Selector

Grouping selector is used to select all the HTML elements with the same style. Group Selector are used to Commas, separate each selector in grouping..

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1, h2, p {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1>Hello HTML</h1>  
<h2>Hello CSS</h2>  
<p>Bootstrap.</p>  
</body>  
</html>  

Test it Now

Output:

Hello HTML

Hello CSS

Bootstrap.

Next TopicHow to USe CSS

← prev next →

CSS Tutorials

CSS Properties

CSS Selectors

1) Class Selector

Example1:-

This heading, red Color.

2) Id Selector

Example2:-

This heading, red Color.

3) Element Selector

Example3:-

Example:-

4) Universal Selector

HTML

5) Group Selector

Hello HTML

Hello CSS