Google News
logo
CSS selectors
In CSS selectors are patterns used to select the element's you want to style. Use our CSS Selector Tester to demonstrate the different selectors. 

There are several different types of selectors in CSS.
  • CSS Class Selector
  • CSS Id Selector
  • CSS Universal Selector
  • CSS Element Selector
  • CSS Group Selector 
   and more selectors etc...
Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol)
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Class Selector</title> 
</head>  
<body>  

<style type="text/css">
.class_selector{
    color:#0099da;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
</style>

<h1 class="class_selector">Free Time Learning (F T L)</h1>
<h3 class="class_selector">www.freetimelearning.com</h3> 
  
</body>  
</html>  
Output :

Free Time Learning (F T L)

www.freetimelearning.com

ID Selector
The id selector selects the id attribute of an HTML element to select a specific element. It is written with the hash character (#), followed by the id of the element.
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - ID Selector</title> 
</head>  
<body>  

<style type="text/css">
#id_selector{
	color:#0099da;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
#id_selector_2{
	color:#F60;
	font-weight:bold;
	font-style:italic;
	text-align: center;
}
</style>

<h1 id="id_selector">Free Time Learning (F T L)</h1>
<h3 id="id_selector_2">www.freetimelearning.com</h3> 
  
</body>  
</html>  
Output :

Free Time Learning (F T L)

www.freetimelearning.com

Universal Selector
The universal selector is used as a wildcard character(*). It selects all the elements on the pages.
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Universal Selector</title> 
</head>  
<body>  

<style type="text/css">
* {
   color:#6C0;
   text-align:center;
} 
</style>

<h1>Free Time Learning (F T L)</h1>
<h3>www.freetimelearning.com</h3> 
  
</body>  
</html>  
Output :

Free Time Learning (F T L)

www.freetimelearning.com

Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Element Selector</title> 
</head>  
<body>  

<style type="text/css">
h1{  
	color:#F00;
	font-weight:bold;
    text-align:center;  
     
} 
p{  
	color:#00F;
	font-weight:bold;
    text-align:center;  
     
}
</style>

<h1>Free Time Learning (F T L)</h1>
<p>www.freetimelearning.com</p> 
  
</body>  
</html>  
Output :

Free Time Learning (F T L)

www.freetimelearning.com

Group Selector
The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Selectors - Group Selector</title> 
</head>  
<body>  

<style type="text/css">
h1, h3, p, .my_font { 
    color:#F3C;
	text-align:center;
	font-weight:bold; 
}  
.my_font{ font-size:18px; font-style:italic;}
</style>

<h1>Free Time Learning (F T L)</h1>
<h3>www.freetimelearning.com</h3> 
<p>www.freetimelearn.com</p> 
<div class="my_font">Free Time Learning (www.freetimeleaning.com)</div>
  
</body>  
</html>
Output :

Free Time Learning (F T L)

www.freetimelearning.com

www.freetimelearn.com

Free Time Learning (www.freetimeleaning.com)