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.

Home Page - Basic Engineer
Home Page – Basic Engineer

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>



example of tag selector / element selector
Output

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>
Output of class selector
Output

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>
Output of ID selector
output

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> 
Example of Group Selector CSS
Output

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 ­čśÇ.


Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *