CSS HTML Javascript jQuery Ajax PHP Example Java MORE
Need a Website Or Web Application Contact : +91 9437911966 (Whatsapp) Note: Paid Service

CSS Selectors

CSS Selectors are used to selecting a particular HTML element you want to style. There are several different types of selectors in CSS.

  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector

CSS element selector:

The element selector selects the HTML element by name.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
  	color: red;
  	text-align: center;
} 
 
h1 {
	color:green;
  	text-align: center;
} 
 
</style>
</head>
<body>
 
  <h1>Hello World!</h1>
  <p>This paragraph is styled with CSS.</p>
  
</body>
</html>

Run it yourself

CSS ID Selector

The CSS ID selector is used to add a style for a particular HTML element of a page. An ID is always unique for a single page. If you use the same id for two HTML elements on the same page always first ID working.

It is declared within style element followed by a # symbol.

<!DOCTYPE html>
<html>
<head>
<style>
#heading{
  	color: green;
  	text-align: center;
} 
#paragraph{
  	color: red;
  	text-align: center;
} 
</style>
</head>
<body>
 
  <h1 id="heading">Hello World!</h1>
  <p id="paragraph">This paragraph is styled with CSS.</p>
  
</body>
</html>

Run it yourself

CSS Class Selector

It is declared within style element followed by a (.) Dot symbol. It is used to add a style for a group of the element which class name is the same.

<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
  	color: red;
  	text-align: center;
} 
</style>
</head>
<body>
 
  <h1 id="heading">Hello World!</h1>
  <p class="paragraph">This paragraph is styled with CSS.</p>
  <p class="paragraph">It is very easy and simple.</p>
  
</body>
</html>

Run it yourself

CSS universal selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
*{
	color: green;
	text-align: center;
} 
 
 
 
</style>
</head>
<body>
 
  <h1>Hello World!</h1>
  <p>This paragraph is styled with CSS.</p>
  
</body>
</html>

Run it yourself

CSS Group Selector

The grouping selector is used to select all the HTML elements with the same style definitions.

Grouping selectors are used to minimizing the code. Commas are used to separate each selector in a grouping.

Let's see the CSS code without a group selector.

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

As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:

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

Let's see the full example of CSS group selector.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1, h2, p {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1>Hello studentstutorial.com</h1>  
<h2>Hello studentstutorial.com (In smaller font)</h2>  
<p>This is a paragraph.</p>  
</body>  
</html> 

Run it yourself