CSS Selectors 101: Targeting Elements with Precision

Introduction — Why CSS Needs Selectors

CSS cannot apply styles without knowing where to apply a specific style. To style a specific element, there needs to be a unique identifier to select that specific element to be styled. Without, selector all styling becomes random or gets applied to the entire page. It is like addressing a crowd rather than calling someone specific using their name. Selectors are the foundation of CSS. For precise styling, CSS selectors are needed.

What is a CSS Selector?

Selectors in CSS are used to choose HTML elements. Selectors are the ones who decide who gets styled. Selector works as a filter deciding the specific element or group of elements which are going to be styled next. CSS has a set rule for selector, which says that while writing CSS, first comes the selector name and then comes the declaration block which decides the styling of the selected elements. An example of CSS selector is given below.

body{
background-color:red;
color:black}

Element Selector

Element Selector is used to select an element anywhere in the entire HTML document, the given element may have multiple instances and all of them will get styled at the same time. Syntax structure involves writing the name of the tag followed by a curly brace which holds the declaration block which decides the styling of the selected element. It is used for addressing an entire category. An example of Element Selector is given below.

It will make all the text in paragraph tag, red colored anywhere in the entire webpage.

p {
color:red}

Class Selector

The class selector uses the class attribute from HTML tags. They are accessed in CSS using . notation. They can be reused across multiple elements. One single element can have multiple classes. It is designed for reusable styling patterns. Some of the practical use cases of Class selector are in buttons, cards and layout components. It is really flexible with it usage in various elements. It is like calling everyone wearing a red shirt, when we use class to call every element from that class.

This is an example of HTML with class highlight.

<p class="highlight">Important text</p>

CSS using class selector for highlight class and adding a background colour yellow to it. It is shown how we used . notation to specific that it is a class.

.highlight {
  background: yellow;
}

ID Selector

The ID selector uses the ID attribute from HTML tags. They are accessed in CSS using # notation. It is used to target a specific element in the HTML. It is designed for targeted styling patterns. Some of the practical use cases of ID selector are in header and main section. ID should be unique for every page. It is used for single specific elements. It is like calling someone by their full name, when we use ID to call a specific element with that specific name gets styled.

This is an example of HTML with class highlight.

<h1 id="header">Welcome</h1>

CSS using ID selector for header id and changing the font size to 24pixels. It is shown how we used # notation to specific that it is using ID.

#header {
  font-size: 24px;
}

Group Selectors

Group selector is used to group several selectors into one rule. It is used to combine multiple selectors. It uses comma separated syntax. It is used to avoid repetition in CSS. It improves the readability and maintenance of the CSS.

The CSS below changes the font for all of the headings: h1, h2, h3.

h1, h2, h3 {
  font-family: Arial;
}

This would have been the CSS if we didn't use group selectors in CSS. Very lengthy and not clean. Think of it as addressing multiple groups with one announcement.

h1 {
  font-family: Arial;
}
h2 {
  font-family: Arial;
}
h3 {
  font-family: Arial;
}

Descendant Selectors

Descendant Selectors target elements inside other elements.

div p {
  color: green;
}

This styles only the paragraphs inside the div tag. It adds context to which paragraph is being styled, it does styling every paragraph but only specific ones based on location. An analogy for Descendant Selectors is like calling all the students inside Room A.

Basic Selector Priority

When multiple selectors target the same element, CSS decides using priority

ID > Class > Element

IDs have a higher priority compared to classes, while classes have a higher priority compared to elements.

This is called specificity, it prevents conflict between which style gets applied to an element.