CSS Selector

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. The Element Selector

2. The Id Selector

3. The Class Selector

4. The Universal Selector

5. The Group Selector

1.) The Element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a blue text color):

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p{  
   text-align: center;  
   color: blue;  
}   
</style>
</head>
<body>
<p id="para1">This style will be applied on every paragraph.</p>
<p>Me too!</p>
</body>
</html>
Try it with the Editor

2.) The Id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
#para1{  
   text-align: center;  
   color: blue;  
}   
</style>
</head>
<body>
<p id="para1">This style will be applied on this paragraph only.</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Try it with the Editor

Note: An id name cannot start with a number!

3.) The Class Selector

The class selector selects elements with a specific class attribute.

In the example below, all HTML elements with class="center" will be blue and center-aligned:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
.center{  
   text-align: center;  
   color: blue;  
}   
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Try it with the Editor

Note: An class name cannot start with a number!

The Class Selector for specific element

You can also specify that only specific HTML elements should be affected by a class.

In the example below, only <p> elements with class="center" will be center-aligned:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.center{  
   text-align: center;  
   color: blue;  
}   
</style>
</head>
<body>
<h1 class="center">This heading is not affected.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Try it with the Editor

4.) The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
* {  
  color: green;  
  font-size: 20px;  
}     
</style>
</head>
<body>
<h2>This is heading.</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Try it with the Editor

5.) The Grouping Selectors

If you have elements with the same style definitions, like this:


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

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:


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

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p {  
	 text-align: center;  
	 color: blue;  
	}    
</style>
</head>
<body>
<h1>Hello TipsnTrack.com</h1>
<h2>Hello TipsnTrack.com</h2>
<p>This is a paragraph.</p>
</body>
</html>
Try it with the Editor