DEV Community

Cover image for A Dive into CSS Selectors
Duncan Ndegwa
Duncan Ndegwa

Posted on

A Dive into CSS Selectors

What are selectors in CSS

Selectors are used to locate or find HTML elements based on their name, id, class, attributes, and many more.

Prerequisites

To follow along with this tutorial it is assumed that you have a basic knowledge of HTML.

Install a text editor such as Vs Code, Sublime text, notepad, or any other text editor you are comfortable width.

CSS selectors

To understand what selectors are, first, let's look at the syntax of CSS:

p {
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

In the above css syntax p is the selector. The braces {} defines the declaration block. Inside the braces is the name of the property and its value separated by a colon. In CSS each declaration is ended using a semicolon.

The element Selector

For example, you can select all <h1> in a HTML page to have a text color red and be aligned at the center using the following code:

h1 {
    text-align: center;
    color: black;
}
Enter fullscreen mode Exit fullscreen mode

In the above, all headers using the tag <h1> will be colored black and center-aligned.

The id Selector

This selector is used to select a specific element based on the id attribute of a HTML element. Changes will only occur on the element with the id.
The hash character (#) followed by the id name of the element is used to select the specific element.
Let's have a look at the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- insert CSS code here -->
    <style> 
        #line1{
            color: blue;
            text-align: center;
        }
    </style><!-- end of CSS code -->
</head>
<body>
<p id="line1">This is a css selector</p> <!-- The css style will on apply to this line -->
<p>Only the paragraph with the id is selected</p>    
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you run the above code, you will notice that the css style will on apply to the paragraph with the id #line1.

The class Selector

This selector locates HTML element with specific class attributes. The dot(.) character followed by the class name of the element is used to find elements with a certain class. To understand this better let us examine the code below when run:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- insert CSS code here -->
    <style> 
        .line1{
            color: green;
            text-align: center;
        }
    </style><!-- end of css code -->
</head>
<body>
   <h1 class="line1"> CLASS SELECTOR</h1>

   <p>This selector locates HTML elements with specific class attributes.</p>

   <p class="line1">This is a css selector</p> <!-- The css style will on apply to this line -->


   <h1>CSS style will only affect the named class</h1>    
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

When you run the above code, you will find that only specific elements are affected by the class selector.

Grouping selectors

In case you have similar styles defined using different selectors like the one below:

h1 {
    text-align: center;
    color: black;
}
div {
    text-align: center;
    color: black;
}
p {
    text-align: center;
    color: black;
}
Enter fullscreen mode Exit fullscreen mode

It is always better to group them to reduce the size of your code. To group them use a comma to separate the selectors as illustrated below:

h1, div, p {
    text-align: center;
    color: black;
}
Enter fullscreen mode Exit fullscreen mode

NOTE: The id and class names should never start with a number.

Conclusion

In this article we have learned the following:

  • What are selectors?
  • Different types of selectors.
  • How to group selectors

Further reading

See the following sources for more details on CSS:

Thanks for Reading

Let us connect on Twitter and LinkedIn
Want to see what I am working on? Check out my GitHub

Top comments (0)