/    /  CSS Selector

CSS Selector

 

CSS Selectors are the most important aspects of CSS as they allow you to target specific elements on your web page(website) in different ways so that they can be styled.

CSS selectors are used to selecting the text you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements –  id, class, type, attribute, etc.

 

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:

 

It is the HTML element based on the element name.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
p{
  text-align: center;
  color: #ff0066;
}
</style>
</head>
<body>
<p>This style will be applied on each paragraph.</p>
<p id="para">second paragraph</p>
<p>paragraph</p>
</body>
</html>

 

OUTPUT:

 

CSS Selector

 

CSS Id Selector:

 

It is used to provide style rules for a single or unique element and is defined with a hash sign (#) immediately followed by the id value.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
#para {
  text-align: center;
  color: red;
}
</style>
</head>
<body>
<p id="para">Hello i2tutorials.com</p>
<p>this paragraph will not be affected.</p>
</body>
</html>

 

OUTPUT:

 

CSS Selector

 

CSS Class Selector:

 

It is selected HTML elements with a specific class attribute. It is used for a period sign (.). (full stop symbol) followed by the class name.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: #00cc00;
}
</style>
</head>
<body>
<h1 class="center">Heading element.</h1>
<p class="center">This paragraph is center-aligned.</p>
</body>
</html>

 

OUTPUT:

 

CSS Selector

 

 CSS Class Selector for specific element:

 

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 center-aligned.</p>  
</body> 
</html>

 

OUTPUT:

 

CSS Selector

 

CSS Universal Selector:

 

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

 

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 each paragraph.</p>
<p id="para1">Me also!</p>
</body>
</html>

 

OUTPUT:

 

CSS Selector

 

CSS Group Selector:

 

It is used to select all the elements with the same style definitions.

A grouping selector is used to minimize the code. Commas are used to separate each selector in the grouping.

 

Syntax:

 

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

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: #000066;
}
</style>
</head>
<body>
<h1>Hello I2tutorials</h1>
<h2>Welcome to I2tutorials</h2>
<p>This is a paragraph.</p>
</body>
</html>

 

OUTPUT:

 

CSS Selector