Rohtash Talan's Blog

Detail guide on CSS Selector with code examples

Rohtash Talan's photo
Rohtash Talan
·

3 min read

Table of contents

Cascading Style Sheet, also known as CSS is a design language intended to simplify the process of making the web pages presentable. 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, these selectors allow coder to use them when selecting elements to style. This article will discuss the selectors and their types.

What Are Selectors?

A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

##Types of Selectors There are various types of selectors in CSS. They are:

  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS Universal Selector
  5. CSS Group Selector

CSS Element Selector

<html>
<head>
<title>Css selectors</title>
<style>
    p{
        color: #d30f0f;
        font-size: 20px;
    }
</style>
</head>
<body>

    <p>This style will be applied on every paragraph</p>
    <p>second paragraph</p>
    <p>third paragraph</p>
</body>
</html>

All the <p> elements will be in red text and a font size of 25 pixels.

image.png

CSS Id Selector

The id selector selects the element based on the id attribute.

The id of an element is unique within the page, so the id selector is used to select the unique element.

It is written with the hash character (#), followed by the id of an element.

<html>
<head>
<title>Css selectors</title>
<style>
    #text-center{
        text-align: center;
        color: #d30f0f;
        font-size: 20px;
    }
</style>
</head>
<body>

    <p id="text-center">This style will be applied on every paragraph</p>
    <p>second paragraph</p>
    <p>third paragraph</p>
</body>
</html>

The paragraph with ‘text-center’ will be styled and all the other elements remain as it is.

image.png

CSS Class Selector

The class selector selects the element based on the class attribute. It is written with a period character (.), followed by the class name.

<html>
<head>
<title>Css selectors</title>
<style>
    .class-lco{
        text-align: center;
        color: #d30f0f;
        font-size: 20px;
    }
</style>
</head>
<body>

    <p class="class-lco">This style will be applied on every paragraph</p>
    <p class="class-lco">second paragraph</p>
    <p>third paragraph</p>
</body>
</html>

As you can see the style is applied only to “class-lco”.

image.png

If you’d like only 1 specific element to be affected by the action, then you should use the element name with the class selector. Let’s understand this with an example.

<html>
<head>
<title>Css selectors</title>
<style>
    h1.class-lco{
        text-align: center;
        color: #d30f0f;
        font-size: 20px;
    }
    h2.class-lco{
        text-align: center;
        color: #0d7b03;
        font-size: 20px;
    }
</style>
</head>
<body>

    <h1 class="class-lco">welcome to LCO</h1>
    <h2 class="class-lco">second paragraph</h2>
    <p>third paragraph</p>
</body>
</html>

You can see the h1 and h2 are styled differently.

image.png

CSS Universal Selector

The universal selector (*), selects all the HTML elements on the page.

<html>
<head>
<title>Css selectors</title>
<style>
    *{
        text-align: center;
        color: #1308b4;
        font-size: 20px;
    }

</style>
</head>
<body>

    <h1 class="class-lco">welcome to LCO</h1>
    <h2 class="class-lco">second paragraph</h2>
    <p>third paragraph</p>
</body>
</html>

All the elements are selected on the page.

image.png

CSS Group (combined) Selector

<html>
<head>
<title>Css selectors</title>
<style>
    h1,h2,p{
        text-align: center;
        color: #b40886;
        font-size: 30px;
    }

</style>
</head>
<body>

    <h1>welcome to LCO</h1>
    <h2>second paragraph</h2>
    <p>third paragraph</p>
</body>
</html>

All the elements with the same style can be styled at once.

image.png

Conclusion

Selectors in CSS allow you to maintain control over the customization of code when creating a webpage from scratch. Investing time in learning and testing different CSS selectors will make you to style the website efficiently with fewer codes and faster load-time.

iwritecode