What are CSS Selectors?
- CSS selectors are used to select the HTML elements for styling.
- There are multiple types of selectors in CSS: element selector, group selector, id selector, class selector, etc.
- Today we will see only some basic selectors in CSS and other selectors we will learn in upcoming tutorials.
Element Selector
Element selectors are used to targeting the HTML element by tag name and style them in our style sheet.
p {
color: red;
}
Group Selector
As the name suggests group selectors are used to selecting multiple elements and applying the same style to them.
h3, p{
color: red;
}
Id Selector
Id selectors are used to target particular HTML element with the help of id. Hash (#) is used to target the particular element from the HTML document.
#heading {
color: blue;
}
Class Selector
Class selectors are used to target multiple HTML elements with their classes. Dot (.) is used to target the multiple elements with the class from the HTML document.
.para {
color: purple;
}
Attribute Selector
Attribute selector is used to target the HTML elements with their attribute.
input[type="text"] {
background-color: red;
color: white;
}
Code Described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Selectors in CSS </title>
<style>
/* Element Selector */
h1 {
color: red;
}
li {
color: purple;
}
/* Group Selector */
h1,
h3,
p {
color: red;
}
/* Id Selector */
#heading {
color: red;
}
#secondaryHeading {
color: purple;
}
/* Class Selector */
.para,
.list {
color: blue;
}
/* Universal Selector */
* {
background-color: red;
color: white;
}
/* Attribute Selector */
input[type="text"],
input[type="number"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h1 id="heading"> This is a heading </h1>
<h3 id="secondaryHeading"> This is a heading </h3>
<p class="para"> This is a paragraph</p>
<p class="para"> Lorem ipsum dolor sit amet consectetur adipisicing elit. At, mollitia perferendis dignissimos
exercitationem facere culpa accusamus est. Omnis fuga dolorem autem dicta totam ullam ad, doloribus, corporis
illum vitae nam asperiores, natus reprehenderit ipsam sapiente. Odit ratione placeat in quam?</p>
<ul>
<li class="list"> This is a list </li>
<li class="list"> This is another list </li>
<li class="list"> This is also another list </li>
</ul>
<input type="text" name="text">
<input type="number" name="text">
<input type="button" name="text" value="Submit">
</body>
</html>
