Selector is an element in which we can define / set style according to requirement. CSS selectors select HTML elements according to its attribute, class, ID and type. is knows as CSS Selector. There are a five types of CSS selector element selector, Class selector, Id selector, Group selector and Universal selector.
Types
There are five type of CSS Selector.
- Tag selector /element selector.
- Class selector.
- Id selector.
- Group selector.
- Universal selector.
Tag selector /element selector.
It represent the name of HTML Tag is knows as Tag Selector / Element selector.
For example
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
h1 {
text-align: center;
color:green;
}
</style>
</head>
<body>
<h1>Tag selector /element selector</h1>
<p>It represent the name of HTML Tag</p>
</body>
</html>
Class selector
- It is identified with the help of any particular name a/c to identifier rule.
- It must be start with dot(.) symbol.
- It is applies with multiple tags a/c to requirement.
- It can be use multiple times.
- A class name cannot be start with any number.
How to use ?
<div class ="box">
----------------------
</div>For example
<html>
<head>
<style>
.center {
text-align: center;
color:green;
}
.cen {
text-align: center;
color:red;
}
</style>
</head>
<body>
<h1 class="center">Class Selector</h1>
<p class="cen">A class name cannot be start with any number</p>
</body>
</html>
Id selector
- It is similar to class selector but it is written with the help of of “#” symbol.
- One major difference b/w Id and class is that Id can be use only once time but class can be use multiple times according to requirement.
syntax
#logo
{
background-color:bule;
color:pink;
}For example
<html>
<head>
<style>
#yoyo {
text-align: center;
color: green;
}
#why {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id="why">ID selector</h1>
<p id="yoyo">Hello student</p>
</body>
</html>
Group selector.
- The group selector is use to select all the elements with the same style.
- Group selector is use to minimize the code.
- Group selector is use Commas.
- we define styles with multiple tag.
Example
<html>
<head>
<style>
h1, h2,h3,h4,h5,h6 {
text-align: center;
color:red;
}
</style>
</head>
<body>
<h1>Group selector is use to minimize the code</h1>
<h2>Group selector is use to minimize the code</h2>
<h3>Group selector is use to minimize the code</h3>
<h4>Group selector is use to minimize the code</h4>
<h5>Group selector is use to minimize the code</h5>
<h6>Group selector is use to minimize the code</h6>
</body>
</html>
Universal selector
- It is applied for all elements.
- It is represented with the help of (*)star.
- The universal selector is use to a wildcard character.
For Example
<html>
<head>
<style>
* {
color: tomato;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2>universal selector</h2>
<p>It is represented with the help of (*)star</p>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about CSS Selector please check Wikipedia link Click Here .
Stay Connected Stay Safe. Thank you 😀.
0 Comments