CSS Selectors 101: Targeting Elements with Precision
CSS Selectors 101: Universal, Class, ID & Chained Selectors Explained
Why CSS selectors are needed
In this article, you will know about the CSS Selectors, how HTML element are selected from HTML file and give style to them. So let started.
The above clip, explain virtually, what CSS do, if the video does not work [Click me]. CSS stands for Cascading Style Sheet . There are different way to write CSS, which are:-
- Inline CSS
<p style:"color: red;">Hello, this is inline CSS styling.</p>
- Internal CSS
<head>
<style>
p{
color: blue;
background-color: yellow;
}
</style>
</head>
- External CSS
<link rel="stylesheet" type="text/css" href="style.css";
Type's of CSS Selector
Let's talk about how we can select & style HTML elements via CSS :
Their are different types of CSS selector and different ways to select CSS elements:
Universal Selector
Individual Selector
Class Selector
Id Selector
Chained Selector
Universal Selector
The Universal Selector is a CSS selector, that select every element that is present in the CSS file and gives styling to every element.
Syntax:
*{
property: value;
}
Example
index.html
<section>
<h1><u>Universal Selector: </u></h1>
<p>This is a example of Universal Selector.</p>
<p>
You can see, this HTML code contains muliple HTML tags like h1, and 2 p tags. With just one CSS selector <b>--[ * ]--</b>.
</p>
<hr>
</section>
style.css
*{
background-color: black;
color: #ffff;
}
Output Screen:
Individual Selector
It gives power to CSS to give style to HTML elements using HTML tags name.
Syntax:
HTML-tag-name{
property: value;
}
Example:
index.html
<body>
<h1>Individual Selector</h1>
<p>It gives power to CSS to give style to HTML elements using HTML <b>Tags names</b></p>
<button>Learn more</button>
</body>
style.css
*{ /* -- Universal Selector */
color: white;
background-color: black;
}
body{
border: 2px solid green;
border-radius: 10px;
padding: 25px;
}
h1{
color: aqua;
}
p{
color: brown;
}
button{
padding: 5px;
background-color: chocolate;
border-radius: 2px;
border: none;
}
Output Screen:
Class Selector
Class is a power selector in CSS. You can select and give similar style to multiple HTML element at once.
Syntax:
.className {
property: value;
}
Example:
index.html
<body>
<header class="header">
<h1>Class Selector</h1>
</header>
<section class="main-body">
<p>A demo example of how Class Selector work ... </p>
<ul>
<li class="classA">Item 1</li>
<li class="classB">Item 2</li>
<li class="classA">Item 3</li>
<li class="classB">Item 4</li>
<li class="classA">Item 5</li>
</ul>
<p>The above example contains of 2 classes:</p>
<ul>
<li class="classA">class = "classA"</li>
<li class="classB">class = "classB"</li>
</ul>
<p>With just classA or classB you can apply similar style to multiple HTML elements at onces.</p>
<hr>
</section>
</body>
style.css
*{
background-color: #000000;
color: #ffffff;
}
.header{
color: #00ffff;
border: 2px solid #ff4500;
border-radius: 5px;
text-align: center;
}
.main-body{
border: 2px solid #ff4500;
border-radius: 5px;
}
li{
margin-bottom: 5px;
padding: 10px 5px;
}
.classA{
border: 2px dotted #008000;
border-radius: 5px;
}
.classB{
border: 2px dashed #805300;
border-radius: 5px;
}
Output Screen:
Id Selector
You can select element using Id selector by using "#". The value of id selector should be unique in a document.
Syntax:
#idName{
property: value;
}
Example:
index.html
<body>
<h1 id="header">Welcome to Id Demo</h1>
<p id="para1">Paragraph-1 is Selected by Id selector.</p>
<p>Paragraph-2 not selected my Id selecter</p>
</body>
style.css
*{
background-color: #000000;
color: #ffffff;
}
#header{
color: #0000ff;
text-align: center;
border: 2px dotted #9acd32;
}
#para1{
color: #ff9100;
font-size: 19px;
font-weight: 600;
}
Output Screen:
Chained Selector
A CSS selector that combines multiple selector without space to target a particular element in HTML file that match all conditions together.
Syntax:
selector1.selector2{
property: value;
}
Example:
index.html
<body>
<h1>Chained Selector</h1>
<ul>
<li class="red text-green">item-1</li>
<li>item-2</li>
<li class="red">item-3</li>
<li>item-4</li>
</ul>
</body>
style.css
*{
background-color: #000000;
color: #ffffff;
}
body{
padding: 5px;
border: 2px dotted #ff0000;
border-radius: 5px;
}
h1{
color: #00ffff;
}
ul li{
margin: 9px;
padding: 5px;
border: 2px #ff4500;
border-radius: 5px;
}
.red{
background-color: #ff000063;
}
.text-green{
color: green;
}
Output Screen:
-—» THE END, see you in Next Article😁👍
