DEV Community

elinabey
elinabey

Posted on

Types of CSS Selectors

Types of CSS Selectors
Types of CSS Selectors are utilized to pick the substance that we need to style. It helps in separating components dependent on their group, id, type, and so forth. A CSS Selector is a segment of the CSS Ruleset.
In our last tutorial we discussed Introduction to CSS Controls

Types of CSS Selectors

1.CSS Attribute Selector.
2.CSS Class Selector.
3.CSS Id Selector.
4.CSS Universal Selector.

CSS Attribute Selector.

The CSS Attribute selector styles content as indicated by the trait and the quality worth referenced in the square sections.
This CSS code would be a counterpart for the accompanying HTML component.

<input type="text">
<style>
  input[type="text"] {
background-color: #000;
width: 100px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Moreover, if the estimation of the quality 'type' changes, the Attribute selector would not coordinate it.

CSS Class Selector.

he CSS Class selector is one of the most supportive selectors of the considerable number of selectors. It is proclaimed by utilizing a spot followed by the name of the class.

<div class="soft"></div>
<style>
  .soft {
margin: 20px;
    width: 20px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

CSS Id Selector.

CSS ID selector encourages the engineer to coordinate the ID made by the designer to its styling content. ID Selector is utilized with the assistance of the hash (#) sign before the ID name proclaimed by the engineer.

<div id="soft"></div>
<style>
  #soft {
margin: 20px;
    width: 20px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

CSS Universal Selector.

In a HTML page, the substance relies upon HTML labels. A couple of labels characterizes a particular website page component.

<style>
  * {
color: black;
font-size: 21px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

This post originally published at Types of CSS Selectors. If you want to read in detail visit their.

I am going to learn and share good content that can help others. If you have any questions please discuss below.
Thank you.

Top comments (0)