Table of contents
What are CSS Selectors?
CSS [Cascading Style Sheets] selectors are the one which are used to target a specific element of the HTML Document so that we are able to apply CSS property and value for that element.
Now lets us dive into different selectors and understand them.
Universal Selector :
Represented by asterisk (*) this selector can select the whole HTML elements. The CSS property defined using * will be applied to entire HTML.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0 ;
padding : 0 ;
}
</style>
</head>
<body>
<p>Paragraph-1</p>
<p>Paragraph-2</p>
</body>
</html>
<!--Here the whole page is affected and margin and padding are removed -- >
Element Selector :
Element Selector is used to target a specific element in HTML by using element tag like h1,p,img etc...
Example :
<!DOCTYPE html>
<html>
<head>
<style>
p {
color : blue ;
}
</style>
</head>
<body>
<p>Paragraph-1</p>
<p>Paragraph-2</p>
</body>
</html>
<!--Here all the <p> tags will get blue color-- >
Class Selector :
Class Selector is used to target all the elements that has the specified class name. There can be same class on multiple elements. A class is represented by ( . ).
Example :
<!DOCTYPE html>
<html>
<head>
<style>
.p {
color : blue ;
}
</style>
</head>
<body>
<p class = "class" >Paragraph-1</p>
<p>Paragraph-2</p>
</body>
</html>
<!--Here the element which have a class name class will be targeted-- >
ID Selector :
ID Selector is used to target the element that has the specified ID name. ID is unique we cannot use same ID on on multiple elements. A class is represented by ( # ).
Example :
<!DOCTYPE html>
<html>
<head>
<style>
#p {
color : blue ;
}
</style>
</head>
<body>
<p>Paragraph-1</p>
<p id = "Para-2" >Paragraph-2</p>
</body>
</html>
<!--Here the element which has a ID of Para-2 will be targeted-- >
Combined Selector :
This is used to target multiple elements at once. The elements are separated by a comma (,).
Example :
<!DOCTYPE html>
<html>
<head>
<style>
p,h1 {
color : blue ;
}
</style>
</head>
<body>
<p>Paragraph-1</p>
<h1>Heading-1</h1>
</body>
</html>
<!--Here the p and h1 elements will be targeted-- >
Descendant combinator :
It is used target a nested element. The elements are separated by a space.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>Heading-1</h1>
<div>
<h1>Heading-2</h1>
<h1>Heading-3</h1>
</div>
<h1>Heading-4</h1>
<h1>Heading-5</h1>
</body>
</html>
<!--Here Heading-2 and Heading-3 will be targeted which are inside a div-- >
Child Selector:
It is used to target a direct child elements of the parent element. The two elements are separated by (>).
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div > h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>Heading-1</h1>
<h1>Heading-2</h1>
<div>
<h1>Heading-3</h1>
<h1>Heading-4</h1>
</div>
<h1>Heading-5</h1>
</body>
</html>
<!--Here Heading-3 and Heading-4 are targeted as they are the Childs of parent div. -- >
Adjacent Sibling Selector :
It is used to select an element that is directly after another specific element. Siblings should have same parent element and should be adjacent.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div + h1 {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1>Heading-1</h1>
</div>
<h1>Heading-3</h1>
<div>
<h1>Heading-5</h1>
</div>
<h1>Heading-7</h1>
</body>
</html>
<!-- Here Heading-3 and Heading-7 will be targeted-- >
Pseudo Selectors :
:Hover
To apply any CSS styles when hovered over an element we use : hover.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
p :hover {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph </p>
</body>
</html>
<!-- Here when you hover over a <p> it changes to blue color -- >
:focus
It applies the required styling as stated when the target element gets focused.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
input :focus {
background-color: yellow;
}
</style>
</head>
<body>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>
<!-- Here when you click on the input box background color changes -- >
:first-child
It will select the first specified element in the document and applies the required styling.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
h1:first-child {
color: blue;
}
</style>
</head>
<body>
<h1>Heading-1</h1>
<h1>Heading-2</h1>
<div>
<h1>Heading-3</h1>
<h1>Heading-4</h1>
</div>
</body>
</html>
<!--Here Heading-1 and Heading-3 are targeted as they are first child of their parents -- >
:last-child
It will select the last one of the specified element in the document and applies the required styling.
<!DOCTYPE html>
<html>
<head>
<style>
h1:last-child {
background: red;
}
</style>
</head>
<body>
<h1>Heading-1</h1>
<h1>Heading-2</h1>
<h1>Heading-3</h1>
<h1>Heading-4</h1>
</body>
</html>
<!-- Here Heading-4 is targeted as it is the last child -- >
:nth-child
It is used to style nth child of parent element. n can be a number, a keyword (odd or even), or a formula (like an + b).
Example :
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>List-1</li>
<li>List-2</li>
<li>List-3</li>
<li>List-4</li>
<li>List-5</li>
</ul>
</body>
</html>
<!-- Here List-3 is targeted as it the 3rd child -- >
Pseudo Elements :
::before
::after
These two are used to add content before or after the selected element with the content property. They are inline by default. The property content is mandatory to use.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Before";
color: blue;
}
h1::after {
content: "After";
color: red;
}
</style>
</head>
<body>
<h1> This is Heading </h1>
</body>
</html>
Hmmm!! That's all in this blog. I hope this article was a good read. Hope to see you in the next one. ✌