What are CSS Selectors?

A CSS selector is the part of a CSS ruleset that allows you to select the element you want to style by type, attributes, or location within the HTML document.

Types of CSS Selectors :

The following is a list of the most common and well-supported CSS selectors. There are many, many more, but these are the ones you should know well.

1. Universal Selector
2. Class and id Selector
3. Element Selector
4. Child Selector
5. Sibling Selector
6. pseudo Selector

1. Universal Selector :

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page.

For example, if we wanted every element to have a solid 1px wide border, we would use the following CSS rule:

* { 
border: 1px solid blue;
}

2. Class and id Selector :

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page

For Example :

.box {
   padding: 20px;
   margin: 0 auto;
   width: 800px;
}

These styles will apply to the following HTML element:

<div class="box"></div>

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

For Example :

#main-menu {
   width: 1230px;
   margin: 0 auto;
   align-item: center;
}

This CSS uses an ID selector to match an HTML element such as:

<div id="main-menu"></div>

3. Element Selector :

The most basic CSS selectors are Element Type Selectors. That's a fancy name for simply using an HTML tag, without the angle braces. Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name.

For Example :

ul {
   list-style: none;
   border: solid 1px #4d4d4d;
}

4. Child Selector :

A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

For Example :

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

In this example, the selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element.

5. Sibling Selector :

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.

For Example :

p + p {
   text-indent: 1.5em;
   margin-bottom: 0;
}

This 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,

So, if we apply this selector to the following HTML:

<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>

6. pseudo Selector :

Pseudo-selectors come in different sizes and shapes. By far the most common pseudo-selectors are used to style our links. There are four different pseudo-selectors to be used in conjunction with links:

:link (A link that has not been previously visited)

:visited (A link that has been visited)

:hover (A link that the mouse cursor is "hovering" over)

:active (A link that is currently being clicked)

For Example :

.main-menu-items:hover{
  color: #8e55ff;
}