CSS3 Selector
CSS3 Selector
With CSS3 selector, you can target HTML element(s) you want to style.
CSS3 Selector Types
There are five types of selectors
- Element sector
- Id selector
- Class selector
- Universal selector
- Grouping selector
In this tutorial, we’ll walk you through the fundamentals of CSS3 selectors.
The CSS3 Element Selector
CSS3 element selector targets HTML elements using their name.
Example
In this code snippet, all the paragraph element is center-aligned with color green.
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:green;
text-align:center;
}
</style>
</head>
<body>
<p>Start your CSS learning journey</p>
<p>Using the CSS element selector to apply styles to paragrpah</p>
</body>
</html>
The output of this code will be
Id CSS3 Selector
The id selector uses the id to apply a style to the id attribute of the HTML element. Each element is assigned a unique id so that the id CSS selector can style a unique element.
To style,an element with a unique id, use the (#) character followed by a unique id of an element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#p1{
color:blue;
text-align:center;
}
</style>
</head>
<body>
<p id="p1">Welcome to Vish Academy</p>
<p>Start learning web development at our paltform </p>
</body>
</html>
The output of this code will be
CSS3 Class Selector
CSS3 class selector applies the style to HTML elements with a class attribute. To apply a style to an HTML element with the specific class name, use the (.) symbol followed by a class name.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
.para{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="para">CSS3 Class Selector</h1>
<p class="para">Using the CSS class selector, you can format elements </p>
</body>
</html>
The output of this code will be
Moreover, you can define a style for a specific element with a class
Example
In the below-mentioned, <p> element with class=”center” will become green and center-aligned.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
p.para{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="para">CSS3 Class Selector</h1>
<p class="para">Using the CSS class selector, you can format elements </p>
</body>
</html>
The output of this code will be
Using the class selector, we can refer to more than one HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
p.para{
color:red;
text-align:center;
}
p.large{
font-size:500%;
}
</style>
</head>
<body>
<h1 class="para">Our style will affect this heading</h1>
<p class="para">Our website will teach you fundamentals of CSS</p>
<p class="para large">This paragraph will appear larger</p>
</body>
</html>
The output of this code will be
CSS3 Universal Selector
The universal selector (*) defines the style for all the HTML elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
*{
color: darkgreen;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy<h1>
<p>All elements will be affected by the universal selector</p>
<p>Learn more</p>
<p>About us</p>
</body>
</html>
The output of this code will be
CSS3 Grouping Selector
The CSS3 grouping selector defines the style for all the HTML elements. All the h1, h2, and p will share the same style definition in the below-mentioned code.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
h1{
color: darkgreen;
text-align: center;
font-weight: bold;
}
h2{
color: darkgreen;
text-align: center;
font-weight: bold;
}
p{
color: darkgreen;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy<h1>
<h2>Vinay Singh will be your instructor </h2>
<p>All elements will be affected by the universal selector</p>
</body>
</html>
The output of this code will be
The code, as mentioned earlier, can be rewritten by grouping all the selectors. Use the comma (,) separator to group all the selectors.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector</title>
<style>
h1,h2,p{
color: darkgreen;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to Vish Academy<h1>
<h2>Vinay Singh will be your instructor </h2>
<p>All elements will be affected by the universal selector</p>
</body>
</html>
The output of the code will remain the same.
Keep learning core web development technologies with us.