In CSS selectors are patterns that are used to select and style one or more elements in HTML Document. Lets discuss some of the selectors in detail using an example
Universal Selector
This selector is used to select everything. I mean everything on HTML Document is styled using universal selector.
Example:
*{
padding-top: 40px;
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
</body>
</html>
Output:
Individual Selector
This selector is used to address particular element in HTML Document. suppose if we consider changing paragraph color to green it will change every paragraph to green. specificity is less in this selector.
Example:
p{
color:darkblue;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
</body>
</html>
Output:
The text is displayed as dark blue because styling is done using individual selector.
Class and ID Selector
The class selector is used to style element based on specific class attribute and it is represented using dot(.). where Id selector is used to style the element based on specific ID and it is represented using hash(#).
Example:
.important{
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li class="important">Class Selector</li>
<li>ID selector</li>
</p>
</div>
</body>
</html>
Output:
And Selector(Chained)
This selector is used to style element based on And condition where the condition mentioned should be true in order to style the elements
Example:
li.bg-yellow.text-blue{
background-color:yellow;
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li>Class Selector</li>
<li id="unique">ID selector</li>
</p>
</div>
<div>
<p >
Semantics in HTML are
<ol>
<li class="text-blue">header</li>
<li>footer</li>
<li class="bg-yellow text-blue">nav</li>
<li>figure</li>
</ol>
</p>
</div>
</body>
</html>
Output:
Combined Selector
This selector is used apply property to one or more element in HTML Document.
Example:
li,ol{
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li>Class Selector</li>
<li id="unique">ID selector</li>
</p>
</div>
<div>
<p >
Semantics in HTML are
<ol>
<li class="text-blue">header</li>
<li>footer</li>
<li class="bg-yellow text-blue">nav</li>
<li>figure</li>
</ol>
</p>
</div>
</body>
</html>
Output:
Inside An Element
This selector is used to target elements inside a particular block.
Example:
div ol li {
background-color:rosybrown;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li>Class Selector</li>
<li id="unique">ID selector</li>
</p>
</div>
<div>
<p>
Semantics in HTML are
<ol>
<li>header</li>
<li>footer</li>
<li>nav</li>
<li>figure</li>
</ol>
</p>
</div>
</body>
</html>
Output:
Direct Child
This selector is used to target direct child elements in HTML Document. The direct child is the child which is present directly inside a block with out having nesting blocks.
div>ol{
background-color:rosybrown;
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
<li>CSS</li>
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li>Class Selector</li>
<li id="unique">ID selector</li>
</p>
</div>
<div>
<table>
<p>
Semantics in HTML are
<ol>
<li>header</li>
<li>footer</li>
<li>nav</li>
<li>figure <a href="https://www.google.com">Google</a></li>
</ol>
</p>
</table>
</div>
</body>
</html>
Output:
Siblings
This selector is used to style the element which is present next to the siblings.
Example:
.sibling + p {
background-color: black;
color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of
a
<li>CSS</li>
document written in HTML or XML (including XML dialects like SVG or XHTML). CSS defines how elements should
be
displayed on a web page, specifying the layout, colors, fonts, and other visual aspects.
</p>
<p>
There are different Selectors in CSS they are
<li>Universal Selector</li>
<li>Individual Selector</li>
<li>Class Selector</li>
<li id="unique">ID selector</li>
</p>
</div>
<div>
<table>
<p class="sibling">
<p>Sibling</p>
Semantics in HTML are
<ol>
<li>header</li>
<li>footer</li>
<li>nav</li>
<li>figure <a href="https://www.google.com">Google</a></li>
</ol>
</p>
</table>
</div>
</body>
</html>
Output:
Finally lets discuss two pseudo elements ::before and ::after in CSS
::before
It is simply like adding extra piece of content at the beginning of something.
::after
It is simply like adding extra piece of content at the end.
Lets see a combined example for these two pseudo elements
Example:
.beginning::before{
content: "Hi Everyone";
color: brown;
background-color: aliceblue;
}
.end::after{
content: "Thank You for your Time";
color:aliceblue;
background-color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="beginning">
<p>Welcome to my tech blog</p>
</div>
<div class="end">
<p>This is the end</p>
</div>
</body>
</html>
Output:
Note:
This blog is helpful if you are just starting with the CSS. The main theme of the selectors is to target particular element from HTML Document and style it.
Thank you for taking the time to read about CSS Selectors. I hope you found it informative and valuable. If you have any questions, suggestions, or topics you'd like me to cover in future posts, please feel free to reach out.