Mastering CSS Selectors: A Comprehensive Guide

Cascading Style Sheets (CSS) is a fundamental language used for styling web pages, to enhance its appearance. It not only enhances the appearance of web pages but also precisely targets and styles specific HTML elements.

And fear not, because I’m here to guide you through this journey of applying styles to your HTML elements specifically using CSS selectors.

Let’s start!

What are CSS Selectors?

CSS selectors are components of CSS that allow you to precisely target and apply styles to specific HTML elements on a web page. They determine which elements in the HTML document will be affected by the defined CSS rules.

Basically, selectors select the HTML element and apply the style to particularly that element.

Now let’s learn about the different types of CSS selectors.

Basic Selectors

We have the following types of selectors in basic selectors.

Element Selector

The element selector selects the elements based on their tag name.

For example, style the text color of all <h1> elements to red.

Another example, align all <p> elements to the center.

Class Selector

The class selector selects the elements based on their class attribute. To select the elements with their class names use . just before the class name.

For example:

Now we will select all the elements with the class “heading”.

This will change the text color of all elements having a “heading” class.

ID Selector

Since the id of an element is unique within a page, so the id selector selects a single element with a specific id attribute.

To select the element with its specific id use # character before the id name.

For example:

Now we will select the specific element with the id “heading”.

Universal Selector

The universal selector selects all the elements on the page. To select all the elements of the web page just use a * sign.

For example:

This will set the margin and padding of all the elements to 0.

Combinators

We have the following types of combinators.

Descendant Combinator

The Descendant Combinator selects elements that are descendants of a specified parent element.

But what are descendants?

Let me explain.

A descendant is simply an element that is inside another element. For example:

Here, <h1> is a descendent of <div>.

Now let’s get back to the descendent combinator.

The Descendant Combinator selects elements that are descendants of a specified parent element. The key idea here is that you should not be concerned about how deeply nested the descendant elements are inside the parent. Whether they are directly inside the parent or several levels deep, you can target all of them.

To select the descendent write the tag name, class attribute or id attribute of the parent element and after a space write the name of the descendent.

For example:

CSS:

This will change the font-size of all the <p> elements inside the <section> element, regardless of their level of nesting.

What if there’s another <p> element outside the <section> element?

Then the font-size: 20px; will not apply to the <p> outside of the <section> element.

A Descendant Combinator only selects the elements that are inside the parent element.

Select using class attribute:

CSS:

Select using id attribute:

CSS:

Child Combinator

The child combinator selects elements that are a direct child of a specified parent element.

To select the direct child element use the> sign between the parent and child element.

For example:

CSS:

Let’s take another example.

Now, we want to change the text color of the <p> element of <section> element.

Will it change the text color of <p> inside <div> element?

This will not.

Because we have used the > sign between <section> and <p>, so this style will only apply to the direct child <p> element of <section> element.

Adjacent Sibling Combinator

The adjacent sibling combinator selects an element that is immediately preceded by a specific sibling element.

To put it simply, an adjacent sibling combinator selects an element that is an immediate sibling of the specified element, and there should be no other elements in between them.

The adjacent sibling combinator is represented by ‘+’ sign.

For example:

Now we want to change the text color of the first <h2> element, not all <h2> elements. Then we can use the adjacent sibling combinator.

The above style will only change the color of the <h2> element which is an immediate sibling of the <h1> element that means which comes just after the <h1> element and there should be no other element between them.

General Sibling Combinator

The general sibling combinator selects sibling elements that share the same parent element and come after the specified element. This combinator does not require the selected element to be immediately preceded by the specified element.

The general sibling combinator is represented by the ~ symbol.

For example:

Now suppose we want to style all the sibling <p> elements of <div> element that comes after the <div> element.

The above style will not change the style of <p> element that is before the <div> element because the general sibling combinator selects sibling elements that come after the specified element and here specified element is <div> .

Pseudo-Class

A pseudo-class is used to define a special state of an element, which means style an element when a user moves the mouse over it or style an element when it gets focus etc.

Syntax for pseudo-class:

Now let’s take a look at some of the pseudo-classes.

Interactive States

:hover

Selects an element when a user hovers their mouse pointer over it.

For example:

CSS:

:active

Selects an element when a user clicks on it.

For example:

CSS:

:focus

Select an element that is in a focus state.

CSS:

:visited

Style links that have been visited.

CSS:

Styling Form Elements

:disabled

You can style disabled inputs differently using :disabled pseudo-class.

CSS:

:enabled

You can style enabled inputs differently using :enabled pseudo-class.

CSS:

:checked

You can style the inputs after being checked using :checked pseudo-class.

CSS:

Styling Child Elements

:first-child and :last-child

You can style the first child element and last child element of a parent element using :first-child and :last-child pseudo-classes respectively.

For example:

CSS:

:nth-child()

:nth-child() allows the selection of specific child elements based on their positions.

For example:

CSS:

You can try all the above styles one by one.

:nth-of-type()

:nth-of-type() narrows down the selection to a specific element type.

For example:

CSS:

:not()

:not() pseudo-class is used for excluding specific elements from being styled.

For example:

CSS:

This will change the color of all <p> elements excluding the <p> element which has a class named third.

Pseudo-Elements

A pseudo-element is used to apply styles to specified parts of an element. For example, style the first letter, or first line of an element, and insert content before, or after, the content of an element.

Syntax:

::before

This is used to insert content before the selected element’s content.

You can insert the " sign before the text using :before.

::after

This is used to insert content after the selected element’s content.

You can insert the " sign after the text using :after.

::first-line

This is used to change the style of the first line of the text.

CSS:

::first-letter

This is used to change the style of the first letter of the text.

CSS:

::marker

This is used to change the style of the marker of the list item.

CSS:

::selection

This is used to change the style of the selected text.

CSS:

Attribute Selectors

Attributes of HTML elements provide additional information about the HTML element. You can style the elements by targeting them using their attributes.

[attr]

Selects the elements with their attributes.

Example:

CSS:

[attr=value]

Selects the elements with their attribute name and attribute value.

Example 1:

CSS:

This will change the style of the email type inputs.

Example 2:

CSS:

[attr~=value]

Selects elements containing a whole word. For example:

CSS:

This will change the color of the <p> element containing special class name.

[attr*=value]

Selects elements containing a substring of a word. For example:

CSS:

This will change the style of all the image element that contains “logo” in its src attribute value.

[attr$=value]

Selects elements with an attribute value ending with a specific word. For example:

CSS:

This will change the style of all the image elements which have their src attribute value ending with “.png”.

[attr^=value]

Selects elements with an attribute value starting with a specific word. For example:

CSS:

This will change the style of all the <a> elements which have their href attribute value starting with “https:”.

Grouping Selectors

You can group multiple selectors to apply the same style to them.

For example:

CSS:

Conclusion

Throughout this blog post, we have learned about the CSS selectors to style our web page elements specifically, using different types of selectors.

We have categorized the selectors as basic selectors, combinators, pseudo-classes, pseudo-elements and attribute selectors.

By embracing these selectors, you can craft web pages that not only look visually appealing but also offer a seamless and enjoyable user experience.

Thanks for reading.

For more content like this click here!

Keep Coding!

Leave a Comment