As a front-end developer, there are times we are facing challenges. CSS selectors are used to target a particular HTML element ,so let's elaborate all the CSS selector.
Let’s begin with CSS Selectors list!
TABLE OF CONTENT
- What are CSS selectors?
- Type selector
- Class selector
- Universal selector
- Combining selectors
- ID Selectors
- Descendant Selector
- Direct Child Combinator
- Adjacent Siblings Combinator
- General Sibling Combinator
- Advanced CSS selectors
- An attribute selector with pseudo-class
- Pseudo-class selector
- Pseudo-element selector
- Pseudo-class with pseudo-element
- 3 Important facts about CSS selectors beginners should remember
- Conclusion
What are CSS selectors?
CSS selectors are a part of the CSS rule set that selects the element we want to style. They are used in the CSS file or inside the “style” tag while declaring the CSS. CSS selectors play an essential role in applying the style to multiple elements at once. We can use the inline CSS using the “style” attribute.
Type selector:
The type selector is the most basic selector, and it is written as a simple element name. For example, to style all h1 tags on your website, you would use the h1 type selector. Below is an example of a type selector in CSS:-
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Red and center-aligned heading</h1>
</body>
</html>
Here's result:-
Class selector
Class selectors are written with a period (.) before the class name. For example, to style all elements with the class name, you would use the .container selector.
Below is an example of a class selector in CSS
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
color:red;
}
</style>
</head>
<body>
<div class="container">
<h1> Class selector</h1>
</div>
</body>
</html>
Result:-
Universal selector
The universal selector is written with an asterisk (). For example, to style all elements on your website, you would use the selector.
Below is an example of a universal selector in CSS that would set the font-size of the entire document to 14px & color will be blue.
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color:blue;
font-size:14px;
}
</style>
</head>
<body>
<div class="container">
<h1>Universal selector</h1>
<p>The CSS rule above will affect every HTML element on the page</p>
</div>
</body>
</html>
Result:-
Combining selectors
You can combine selectors by separating them with a comma (,). For example, to style all h1 and p tags, you would use the h1,p selector.
<!DOCTYPE html>
<html>
<head>
<style>
h1,p{
background-color:yellow;
width:400px;
height:100px;
margin:auto;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Universal selector</h1>
<p>The CSS rule above will affect every HTML element on the page</p>
</div>
</body>
</html>
Result:-
ID Selectors
ID attributes are specific to one element only. If you have a style that you want to apply to one element for some reason, you can an ID attribute to that element and then use an ID selector in CSS to style it. ID selectors are just like class selectors, except you put a # in front of the name of the ID attribute. This selector is the most powerful in terms of CSS Specificity.
Below is an example of a ID Selectors in CSS:-
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Reone Richa</p>
<p id="hometown">I live in Bihar.</p>
</div>
</body>
</html>
Result:-
Descendant Selector
This selector allows us to select elements that are descendants of some other selector. It uses the white space as a separator between the elements.
<!DOCTYPE html>
<html>
<head>
<style>
ul li{
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1>Descendant Selector</h1>
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item 2A</li>
<li>Sub-item 2B</li>
</ol>
</li>
</ul>
</body>
</html>
Result:-
Direct Child Combinator
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
<!DOCTYPE html>
<html>
<head>
<style>
ol>li{
background-color:red;
color:black;
}
</style>
</head>
<body>
<h1>Direct Child Combinator</h1>
<ul>
<ol>
<li>Sub-item 2A</li>
<li>Sub-item 2B</li>
</ol>
</li>
</ul>
</body>
</html>
Let's see the Result:-
Adjacent Siblings Combinator
The Adjacent sibling combinator is represented by the plus (+) character placed between two selectors. This selector selects the immediately followed specified HTML element after another specified element, Both elements must be children of the same parent element or they must be siblings.
<!DOCTYPE html>
<html>
<head>
<style>
div+span{
color:red;
background-color:yellow;
}
</style>
</head>
<body>
<div>Adjacent Siblings Combinator</div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>React</span>
</body>
</html>
Result:-
General Sibling Combinator
The general sibling combination is represented by the Tlide operator (~) character.
This combinator selects all specified HTML elements that are placed after another specified element and they must be children of the same parent element.
<!DOCTYPE html>
<html>
<head>
<style>
div~span{
color:red;
background-color:green;
}
</style>
</head>
<body>
<div>General Sibling Combinator</div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>React</span>
</body>
</html>
Result:-
Advanced CSS selectors
I am calling these selectors advanced, not because the concept is difficult to grasp but because the names of the selectors sound intimidating to new coders like you and I.. These “advanced” CSS selectors are easy to grasp once you get over their names.
An attribute selector with pseudo-class You can combine an attribute selector with a pseudo-class by using the colon (:) separator.
Pseudo-class selector
Pseudo-class selectors are written with a colon (:) before the pseudo-class name. For example, to style all links that are in focus, you would use the :focus pseudo-class selector.
Pseudo-element selector
Pseudo-element selectors are written with a double colon (::) before the pseudo-element name.
Pseudo-class with pseudo-element
You can combine a pseudo-class with a pseudo-element by using the double colon (::) separator.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.user_container{
background-color:red;
height:100vh;
width:100vw;
display: flex;
align-items: center;
justify-content: center;
}
.user_msg{
background-color:white;
height:500px;
width:300px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.user_msg_button{
width:60px;
height:40px;
background-color:#575665;
position:relative;
display:flex;
align-items:center;
border-radius: 10px 10px 10px 10px;
justify-content: center;
color: white;
}
.user_msg_button::after{
content:"";
width:40px;
height:41px;
background-color:#575665;
position:absolute;
right:-55%;
top:60%;
clip-path: polygon(18% 0, 18% 100%, 17% 100%, 18% 100%, 0 25%);
}
</style>
<body>
<div class="user_container">
<div class="user_msg">
<div class="user_msg_button">Button</div>
</div>
</div>
</body>
</html>
Final Result:-
3 Important facts about CSS selectors beginners should remember
Selectors are used to target specific elements on a page. This is important because it allows you to style only the elements that you want, without affecting the rest of the page.
Selectors can be simple or complex, depending on what you need them to do.
You can use multiple selectors to target specific elements on a page. This is helpful when you want to style several elements that are all related in some way.
Conclusion
CSS selectors are important for coding in CSS because they help target specific elements on a web page. This is important because it allows you to style only the elements you want without worrying about affecting other elements on the page. I hope that you liked this article. If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it.
