Home >> css >> CSS Selectors

CSS Selectors

With a CSS selector, you can select the HTML element(s) you want to style.

CSS Selectors

CSS selectors enable you to "find" (or select) the HTML elements you want to style. The CSS selectors can be divided into five categories:

Simple selectors (For selecting elements based on name, id, class)
Combinator selectors (For selecting elements based on a specific relationship between them)
Pseudo-class selectors (for selecting elements based on a certain state)
Pseudo-elements selectors (for selecting and styling a part of an element)
Attribute selectors (for selecting elements based on an attribute or attribute value)

This tutorial explains some of the basic CSS selectors.

The CSS element Selector

This element selector is used for selecting HTML elements on the basis of the element name.

Example

In this example, all <p> elements on the page will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
	<title>The CSS element Selector</title>
	<style>
	
	        p {
                     text-align: center;
                     color: red;
                }

	</style>
</head>

<body>
	<h1>
			Tutorial With Example
	</h1>
	<h2>Element Selector</h2>
	<p>
	      Tutorial With Example: A web portal
	</p>

</body>
</html>

Try With Example

The CSS id Selector

For selecting a specific element, the CSS id selector uses the id attribute of an HTML element. Since any element's id is unique within a page, the id selector is used for selecting one unique element! You can choose an element with a specific id by writing a hash (#) character, followed by the element's id.

Example :

<!DOCTYPE html>
<html>
<head>
	<title>The CSS element Selector</title>
	<style>
	
	        #para1 {
                     text-align: center;
                     color: red;
                }

	</style>
</head>

<body>
	<h1>
			Tutorial With Example
	</h1>
	<h2>Id Selector</h2>
	<p id="para1">
	      Tutorial With Example: A web portal
	</p>

</body>
</html>

Try with Example

The CSS class Selector

The class selector is used for selecting HTML elements with a specific class attribute.

If you wish to select elements with a specific class, you can write a period (.) character, followed by the class name.

Example :

<!DOCTYPE html>
<html>
<head>
	<style>
	.style {
		color: green;
	}
	
	.info {
		background-color: yellow;
		font-style: italic;
		color: green;
	}
	</style>
</head>

<body style="text-align:center">
	<h1 class="style">
			Tutorial With Example
	</h1>
	<h2>.class Selector</h2>
	<div class="info">
		<p>Tutorial With Example: A web tutorial  portal</p>
	</div>
</body>
</html>

Try With Example

It can also be specified that only specific HTML elements should be affected by a class.

Example :

Here, only <p> elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
	<style>
	   p.center {
              text-align: center;
              color: red;
           }
	</style>
</head>

<body>
	<h1>
			Tutorial With Example
	</h1>
	<h2>Element With Class Name Selector</h2>
	<div>
		<p class="center">Tutorial With Example: A web tutorial  portal</p>
                <p>Our Official Blog is also, visit readytocode.net</p>
	</div>
</body>
</html>

Try With Example

The HTML elements can refer to more than one class.

Example

Here, the <p> element will be styled according to class="center" and to class="large":

<!DOCTYPE html>
<html>
<head>
	<style>
	   .center {
              text-align: center;
              color: red;
           }
           .box{
               border:1px solid green;
           }

	</style>
</head>

<body>
	<h1>
			Tutorial With Example
	</h1>
	<h2>Element With Class Name Selector</h2>
	<div>
		<p class="center box">Tutorial With Example: A web tutorial  portal</p>
                <p>Our Official Blog is also, visit readytocode.net</p>
	</div>
</body>
</html>

Try With Example

The CSS Universal Selector

You can select all HTML elements on the page using the universal selector (*).

Example

The CSS rule mentioned below will affect every HTML element on the page:

<!DOCTYPE html>
<html>
<head>
	<title>* Selector</title>

	<style>
	* {
		color: green;
		text-align: center;
	}
	</style>
</head>

<body>
	<h1>CSS Tutorial</h1>
	<h2>*(Universal) Selector</h2>
	<div>
		
<p>Tutorial With Example</p>

		
<p>Welcome</p>

	</div>
	
<p>It is a web tutorial portal.</p>

</body>
</html>

Try With Example

The CSS Grouping Selector

The CSS grouping selector can select all the HTML elements with the same style definitions.

In the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 { 

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

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

 text-align: center; color: red; 
 }

Grouping the selectors will help you to minimize the code.

For grouping selectors, separate each selector with a comma.

Example: In the following example, we have grouped the selectors from the code above:

<!DOCTYPE html>
<html>
<head>
	<style>
	   h1, h2, p {
                              text-align: center;
                              color: red;
          }

	</style>
</head>

<body>
	<h1>
			Tutorial With Example
	</h1>
	<h2>Group All Selector</h2>
	<div>
		<p>Tutorial With Example: A web tutorial  portal</p>
                <p>Our Official Blog is also, visit readytocode.net</p>
	</div>
</body>
</html>

Try With Example

-Advertisement-