The Art of Targeting : Harnessing the Power of CSS Selectors for Efficient Web Styling

Imagine your HTML document as a bustling city with various buildings and people inside them. Now, think of CSS Selectors as special lenses or binoculars that allow you to focus on specific types of buildings or people within the city. If you think of the buildings as HTML elements, then the people will be the content. You can easily spot a man wearing hat inside a skyscraper by locating the skyscraper first and then looking inside it. This is exactly how CSS selectors work!

CSS selectors act as tools that allow you to focus on specific element(s) within your HTML document and apply styles to them.

This article explains CSS selectors, It classifies CSS selectors and explains the function of each. By the end of this article, you will understand how to determine the perfect selector to use when selecting your HTML element(s).

I know you can't wait, so let's get started

CSS Selectors : Targeting HTML Elements for Styling

CSS Selectors are patterns used to select and style HTML elements. They define rules for applying styles to specific elements or groups of elements on a web page. Using CSS, you can target elements based on their types, states, attributes, relationships with other elements, or their position in the document structure. CSS selectors can be classified into four:

• Simple Selectors : select element(s) based on their type, class, ID, or other attributes.

• Pseudo-Class Selectors : select element(s) based on their state or position within the document tree.

• Pseudo-Element Selectors : select and style a part of an element.

• Attribute Selectors: select element(s) based on the presence or value of their attributes.

Simple Selectors

These are the most basic CSS selectors. They include:

• The Element selector : The element selector selects HTML elements using the element name.

HTML

<h2> Autobiography of Malcom X </h2>
<h2> The lord of the rings </h2>
<p> Khalid bn Waleed, The all-time conqueror </p>
<p> Harry Potter and the deadly Alloes</p>

To select elements using the element name, write the element name before the curly braces containing the styles you want it to take.

CSS

h2 {
    color: red;
    text-align: center;
}

The code above selects all h2 on the webpage, changes their text-color to Red and make them center-aligned. Here is what it looks like when the code is viewed on the browser.

• The Class selector : The class selector uses the class attribute of an HTML element to select HTML elements with a specific class name. A class name cannot start with a number!

HTML

<h2 class="book"> Autobiography of Malcom X </h2>
<h2 class="movie"> The lord of the rings </h2>
<p class="book"> Khalid bn Waleed, The all-time conqueror </p>
<p class="movie"> Harry Potter and the deadly Alloes</p>

To select elements with a specific class name, write the period . character, followed by the class name. A single class name can be used to target as many as possible elements.

CSS

.book {
      font-size: 16px;
      color : blue;
}

.movie {
       font-size: 20px;
       color: red;
}

The CSS code above is made up of two blocks. The first block of code selects all HTML elements with class name "book", and changes their font-size and text-color to 16px and Blue respectively. The second block of code selects all HTML elements with class name "movie", and changes their font-size and text-color to 20px and Red respectively. Here is the outcome on the browser.

• The ID selector : The ID selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the ID selector can only select one HTML element using a particular id name. The same id name can't be assigned to two or more elements i.e an id name per element. An id name cannot start with a number!

HTML

<h2 id="book"> Autobiography of Malcom X </h2>
<h2 id="movie"> The lord of the rings </h2>
<p class="book"> Khalid bn Waleed, The all-time conqueror </p>
<p class="movie"> Harry Potter and the deadly Alloes</p>

To select an element with a particular id name, write the # character, followed by the id name. An id name can only be used to target a single element.

CSS

#book {
      color : pink;
      text-transform: uppercase;
}

The CSS code above selects an element with the id name "book", changes its text-color to pink and its lettering to uppercase. Here is what it looks like on the browser.

• The Attribute selector : The attribute selector uses the attribute of an HTML element to select and style element(s) differently from the rest of their kind.

HTML

<p draggable="true"> Autobiography of Malcom X </p>
<p draggable="false"> The lord of the rings </p>
<p> Khalid bn Waleed, The all-time conqueror </p>
<p> Harry Potter and the deadly Alloes</p>

To select an element using the attribute selector, write the element name, followed by the attribute in a square bracket []. There shouldn't be any space between the element name and square bracket containing the attribute P[attribute]. You can be more specific by including the value of the attribute.

CSS

P[draggable] {
               color: purple;
}

P[draggable="false"] {
                       font-weight : bold;
}

The first block of code selects all paragraph P element with the draggable attribute and change their text-color to purple. The second block of code is more specific, it only selects the P element whose draggable attribute has a value of false and gives it a bold appearance. Here is the outcome on the browser.

• The Universal selector : The universal selector selects every element on the webpage(s) where the stylesheet is active.

HTML

<h2 id="book"> Autobiography of Malcom X </h2>
<h2 id="movie"> The lord of the rings </h2>
<p class="book"> Khalid bn Waleed, The all-time conqueror </p>
<p class="movie"> Harry Potter and the deadly Alloes</p>

To select every element on a webpage, just write the * character.

CSS

* {
      color : green;
      text-transform: uppercase;
}

The CSS code above selects every element present in the HTML not minding their different names, class and id. Here is how it is rendered on the browser.

Mastering CSS Selectors: A Comprehensive Conclusion

Selecting the right element to style may be as difficult as looking for needles in haystacks, especially when you have a multipage website made up of many elements. However, with the right CSS selector, the task is relatively easier and faster.

Selectors are ways of singling out a particular element or group of element(s) from their kinds in order to apply a different style to them. CSS selectors are grouped into four main categories comprising of : Simple selector, pseudo-class selector, pseudo-element selector and attribute selector.

Simple selector consists of the most basic CSS selectors, it includes : the element selector, the class selector ., the ID selector #, the attribute selector, and the universal selector *. CSS selectors allow developers to create visually appealing and well-structured web pages.

My next article explains how to combine CSS selectors, Watch out❗❗ .