Types of Selectors in CSS

Basically selectors are used to select the content we want to style. Different types of selectors are listed below.

Universal Selector: The universal selector works like a wildcard character, selecting all elements on a page.

*{
background-color: “black”;
font-size: 10px;
}

In the given example, the provided styles will get applied to all the elements on the page.

ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

#container {
height: 100vh;
width: 50vw;
}

<div id=”container”></div>

In the given example, the provided styles will get applied to all the elements having ID as a container on the page.

Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class.

.text {
background-color : red;
color : white;
font-size : 20px
}

<div class=”text”></div>

In the given example, the provided styles will get applied to all the elements having ID as the text on the page.

Element Type Selector: This selector matches one or more HTML elements of the same name.

td {
border: solid 1px #ccc;
}

In the given example, the provided styles will get applied to all the td elements on the page.

Descendant Combinator: The descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.

#container .box {
float: left;
padding-bottom: 15px;
}

<div id=”container”>
<div class=”box”></div>

<div class=”box-2"></div>
</div>

<div class=”box”></div>

This declaration block will apply to all elements that have a class of box that is inside an element with an ID of the container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

p + p {
text-indent: 1.Sem;
margin-bottom: 0;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class=”box”>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
</div>

The above example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements.
This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

General Sibling Combinator: A selector that uses a general sibling combinator to match elements based on sibling relationships. The selected elements are beside each other in the HTML.

h2 ~ p {
margin-bottom: 20px;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class=”box”>
<p>Paragraph example.</p>
</div>

In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.

input [type=”text”] {
background-color: #444;
width: 200px;
}

<input type=”text”>