What is CSS Selector
Selector means choosing an html tag for applying the styles. CSS selectors can be based on the
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Pseudo Selector
- CSS Group Selector
1. CSS Element Selector:
The element selector selects HTML elements based on the element name such as “p” for paragraphs or “h1” for heading 1.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: rgb(65, 153, 225)
}
</style>
</head>
<body>
<p>Style will be applied on every paragraph.</p>
<p>Hi</p>
<p id="para1">Hello</p>
<p>How are You</p>
</body>
</html>
Output:
2. CSS Id Selector:
By using id selector we can apply CSS style for same group of html tag. An id is always unique within the page so it is chosen to select a single, unique element.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: skyblue;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>In this paragraph, Not applying the style.</p>
</body>
</html>
Output:
3. CSS Class Selector:
By using class selector, We can apply same CSS style for multiple html tags.
To select multiple tags we need to use class attributes.
To represent class name, we have to use dot(.).
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color:purple;
}
</style>
</head>
<body>
<h1 class="center">This heading is purple and center-aligned.</h1>
<p class="center">This paragraph is purple and center-aligned.</p>
</body>
</html>Output:
4. CSS Group Selector:
Grouping multiple selector is group selector. We use comma(,) for grouping selectors.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: rgb(255, 0, 106);
}
</style>
</head>
<body>
<h1>CSS Group selector Example</h1>
<h2>Hello, How are You</h2>
<p>This is a paragraph.</p>
</body>
</html>Output:
5. Pseudo Selector:
A CSS Pseudo selector is a keyword added to a selector that specifies a special state of the selected elements.
Syntax:
Selector: Pseudo Selector Name
{
Style Name: Value<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo selector</title>
<style>
.abc:hover
{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="abc">CSS Selector</h1>
</body>
</html>
Note: When cursor touch an output(CSS Selector) , its will change the color.