Table of contents
Selectors in CSS is a core and crucial concept used for targeting a particular element for styling in a more efficient and through correct approach.
1.Universal selector: All the tags in the complete web page is selected and the styling is targeted as a whole. Mainly used when we want to remove the default styling that was added automatically for the HTML tags.
Syntax: *{
}
Sample Code snippet:
*{
padding: 0;
align-content: center;
}
Removes padding that were already existing by default.
2. Individual Selector: This selector is used to target and style one particular element that is used throughout the file.
Syntax: element{ }
Sample code snippet:
h3{
color: #934d88;
}
The color is applied for all the h3 tags used in the file.
3. Class Selector Classes in html are used to have one or more elements that require same styling. So it is better styled commonly by targeting the class name used. The class selectors are indicated with .ClassName when adding styles in CSS.
For example, if any certain text to be highlighted in red color font in case of warning, all the related elements can be added with the same class.
Note: Each element can have more than one class also.
Syntax:
.className{
}
Sample code snippet:
<html lang="en">
<head>
<title>Selectors</title>
<style>
.classSelector{
background-color: #8872d9;
}
</style>
</head>
<body>
<p class="classSelector selector2">Just a paragraph</p>
</body>
</html>
4. Id selector: Id selector is same as class selector except that only one unique Id can be set for a particular element.
Syntax:
#IdName{
}
Sample code snippet:
<html lang="en">
<head>
<title>Selectors</title>
<style>
#uniqueValue {
background-color: #934d88;
}
</style>
</head>
<body>
<p class="classSelector" id="uniqueValue">Just a paragraph</p>
</body>
</html>
5. Inside an element Selector: Chained Selector is used to target the inside nested element. The exact element that is required to style is targeted with chained selector.
Syntax:
elementName elementName .className{
}
We can target any particular class name or id name or even any element inside the nested element.
<html lang="en">
<head>
<title>Selectors</title>
<style>
div ul .selector{
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li>list 2</li>
</ul>
</div>
</body>
</html>
6. Direct child selector: Direct child Selector is used to target one particular child element of a element. The exact element that is required to style is targeted with direct child selector.
Syntax:
elementName>elementName{
}
We can target any particular class name or id name or even any element inside the nested element.
<html lang="en">
<head>
<title>Selectors</title>
<style>
div > p {
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li>list 2</li>
</ul>
</div>
</body>
</html>
7. And selector: When we need to target a element with id/ class to be particular about the exact element with a styling.
Syntax:
elementName.className1{
}
Or
elementName#IdName{
}
<html lang="en">
<head>
<title>Selectors</title>
<style>
li.selector {
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li >list 2</li>
</ul>
</div>
</body>
</html>
8. Combined selector Combined selectors are used to select and target more than one different elements.
Syntax:
elementName,elementName{
}
<html lang="en">
<head>
<title>Selectors</title>
<style>
li.selector, li#selector2{
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li id="selector2">list 2</li>
</ul>
</div>
</body>
</html>
9. Sibling Selector: Sibling selector selects and targets the element next to the targeted element.
Syntax:
.className+element{
}
<html lang="en">
<head>
<title>Selectors</title>
<style>
.selector+li{
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li id="selector2">list 2</li>
</ul>
</div>
</body>
</html>
The sibling selector can be achieved using both + and ~
Using + : selects the element next to the targeted element
Using ~ : selects all the elements next to the targeted element
Pseudo selectors in CSS :
This Article is all about two interesting pseudo selectors ::before and ::after.
1) ::Before selector
Any styling added to the targeted element is applied just before the particular element exist.
<html lang="en">
<head>
<title>Selectors</title>
<style>
.selector::before{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li id="selector2">list 2</li>
</ul>
</div>
</body>
</html>
2) ::after selector
This works same as ::before but only difference is the styling gets added after the element. Any styling added to the targeted element is applied just after the particular element exist.
<html lang="en">
<head>
<title>Selectors</title>
<style>
.selector::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #b284ab;
}
</style>
</head>
<body>
<div>
<p>paragraph tag</p>
<ul>
<li class="selector">list 1</li>
<li id="selector2">list 2</li>
</ul>
</div>
</body>
</html>
Note: This functionality works even with single colon as :before or :after but it is always better to use ::before / ::after as per the standards