CSS Selectors and its uses.

In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available which we can use in order to style our web pages good. In this article, we'll run through the different types, seeing how they work.

But what are they and why do we use them?

You may have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tells the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Its types

There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article we will look at the different groups of selectors.

Type selectors

A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as p, span, and div tags.

p { /* "p" is the type selector */
  margin: 0 0 1em 0;
}

Universal selector

The Universal Selector is the in CSS. It is essentially a type selector* that matches any type. Type meaning an HTML tag like div, body, button, or literally any of the others.

A common use is in the universal reset, like this:

* {
  margin: 0;
  padding: 0;
}

Class and id Selectors

Class and ID selectors are used to identify various HTML elements. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.

Attribute selector

The attribute selector is more complex than the rest of the selectors and has several syntaxes that can be applied to our HTML elements based on which condition should be satisfied by them. In other words, it matches all the HTML elements which contain a specified attribute and whose value for that attribute satisfies a given condition.

Matches elements with the specified attribute.

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

/* Type selector */
nav {
  background-color: darkslategray;
  padding: 10px;
}

/* Attribute selector */
a[href] {
  color: white;
  text-decoration: none;
}

This will apply a white color to every element that contains the href attribute, regardless of its value, and removes the underline. This is the benefit of using an attribute selector.

Pseudo-elements

A CSS pseudo-element is a keyword that is added to a selector to style a specific part of the selected elements. Syntax: elem:pseudo-element { style properties }. This selector is represented by a double colon (::).

<p>CODE</p>

p::before{
  content: "_";
}

Some of the most common CSS pseudo-elements are:

::after (can also be written as :after), ::before (can also be written as :before), ::marker, ::placeholder, ::first-letter.

And that's all for now, I hope this article helps you in understanding Selectors even more. :-)