CSS selectors

CSS is used to style our HTML page. There are so many elements in an HTML page. CSS selectors are mainly used for targetting those elements and applying CSS properties so that we can style those elements. In this article, we will go through some important CSS selectors along with detailed example which has a wide use case and how they work.

What is a selector?

A CSS selector is a basic element of CSS that is used for targetting a particular element of an HTML page. It is a rule by which we can tell the browser which HTML elements should be selected and have the CSS properties. The selected elements are also called subjects of the selectors.

Here is a list of selectors which we are going to discuss in this article:

Universal selector
Individual selector
Class and ID selector
AND selector
Combined selector
Inside an element selector
Direct child selector
Sibling selector
Pseudo-element selector

::before

::after

1 | Universal Selector

A universal selector is a type of selector that applies any CSS property universally. If we have to apply some CSS properties to the whole HTML page then we should use a Universal selector. We use '*' to apply any CSS property universally. Let's understand this with an example:

* {
        background-color: #242B2E;
        color: #CAD5E2;
      }

If we write this piece of code and apply it to any of our HTML pages then it will change the whole page's background color to #242B2E and all the text color to #CAD5E2.

2 | Individual Selector

The individual selector selects every HTML element individually. We can set some CSS properties and apply those to a particular element for n times. Like, if we write CSS properties for an <p> element then it will apply to all the <p> elements of that HTML page. Let's understand this with an example:

p {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color: #353d41;
      }

If we write this piece of code then the font style and background color will change for all the paragraphs on that particular page.

3 | Class and ID Selector

The class selector selects those HTML elements which share the same class. Like, if there are 10 paragraphs in an HTML file but only 5 paragraphs contain the same class. And we have to apply some CSS properties to that 5 paragraphs then we should use the class selector. To select a class we use '.' before the class name. As well as the ID selector is more specific. If we have to apply some more CSS properties on 1 paragraph among those 5 then we will select that 1 paragraph uniquely using the ID selector. To select an ID we use '#' before the ID name. Let's understand this with an example:

<html>
<head>
<style>
        .classname{
            color: #1f1fd6;
        }
        #unique{
            color: #008000;
        }
    </style>
</head>
<body>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <p class="classname">paragraph 3</p>
    <p class="classname">paragraph 4</p>
    <p class="classname" id="unique">paragraph 5</p>
    <p class="classname">paragraph 6</p>
    <p class="classname">paragraph 7</p>
    <p>paragraph 8</p>
    <p>paragraph 9</p>
    <p>paragraph 10</p>
</body>
</html>

In this piece of code, paragraphs 3 to 7 will change their color to #1F1FD6 due to having the same class except paragraph 5 because it has some unique ID. Paragraph 5 will change its color to #008000 as selected.

4 | AND Selector

AND selector is more like a logical selector. It applies some conditions while selecting and if all those conditions satisfy only then the targeting element will be selected. We use '.' between elements to select those classes. Suppose there are three heading tags containing multiple classes. We have to select the heading tag which has class 1 and class 2. Then our code will look like this:

<html>
<head>
<style>
        h3.class1.class2{
            color: #00009E;
        }
    </style>
</head>
<body>
    <h3 class="class2 class4">Heading 1</h3>
    <h3 class="class1 class3">Heading 2</h3>
    <h3 class="class2 class1">Heading 3</h3>
</body>
</html>

Here, only Heading 3 contains class 1 and class 2. Hence the CSS properties will apply on Heading 3.

5 | Combined Selector

In this selector, we combine two or more individual selectors by using a ','. When we have to apply the same CSS properties on multiple elements then we will use a combined selector. Let's understand this with an example:

<html>
<head>
<style>
        h3,p,ul{
            background-color: #4d4d4d;
            color: #CAD5E2;
        }
    </style>
</head>
<body>
    <h3>Heading 1</h3>
    <p>Some paragraphs</p>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ul>
</body>
</html>

This piece of code will simultaneously apply on <h3>, <p>, <ul>.

6 | Inside an element Selector

In this selector, if there are multiple nested elements and we have to select an element that is inside a couple of elements and has no class and ID then we will use Inside an element selector. Let's understand this with an example:

<html>
<head>
<style>
        div ul ol li{
            background-color: #4d4d4d;
            color: #CAD5E2;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
            <ol>
                <li>list 1</li>
                <li>list 2</li>
            </ol>
        </ul>
    </div>
</body>
</html>

In this piece of code, the selector will select the list items inside the ordered list and apply all those properties. The selector is 'div ul ol li'. To define inside an element selector we just need to add spaces between those individual selectors.

7 | Direct child Selector

This is a method of selecting child elements under parent elements. It uses a combinator '>' to select its elements. If there are multiple children of the same elements then the combinator selects all the children of that element. Further, it follows in the same manner. Let's understand this with an example:

<html>
<head>
<style>
        div>ul>li{
            background-color: crimson;
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <div>
        <li>List item 1</li>
        <li>List item 2</li>
        <ul>
            <li>List item 3</li>
        </ul>
        <ul>
            <p>paragraph 1</p>
            <li>List item 4</li>
        </ul>
    </div>
</body>
</html>

In this piece of code, <div> is a parent element and there are two <li> and two <ul> as child elements. 'div>ul>li' selects all <li> under <ul> and all the <ul> under <div>. Thus the CSS properties will apply only on the <li> under <ul>.

8 | Sibling Selector

In this selector, we use '+' between elements. It selects all the adjacent elements except itself. Like, if there are five paragraphs and the second paragraph contains a class named sibling and we want to apply some CSS properties to the immediate next paragraph then we will use the sibling selector. Let's understand this with an example:

<html>
<head>
<style>
        .sibling + p{
            color: #0099ff;
        }
    </style>
</head>
<body>
    <p >Paragraph 1</p>
    <p class="sibling">Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
</body>
</html>

Here, the CSS properties will only apply to Paragraph 3.

9 | Pseudo-element Selector

A pseudo-element selector is designed to select a particular portion of an element. It acts like there is another element on which we are applying CSS properties. We use a double colon (::) to define a pseudo-element selector. Some pseudo-classes use a single colon (:). It is syntactically different from them. There are a lot of pseudo-element selectors but we only discuss (:: before) and (:: after).

::before

We use this to insert content at the start of the element. Like if there are some labels and we want to display a solid circle before the label, then the code should be:

label::before{
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #7700ff;
        }

::after

We use this to insert content at the end of the element. Like if there are some labels and we want to display a solid circle after the label, then the code should be:

label::after{
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #7700ff;
        }

In this article, we have discussed some important CSS selectors that have a wide use case to target elements. By using only these selectors we can target any element we want.