CSS selectors for beginners

There are a lot of different ways in which we can use the selectors. But before moving onto to the different ways, let's first understand what are CSS selectors.

What are CSS selectors ?

CSS selectors basically let's you select the HTML element(s) that you want to style. It allows you to target the elements very precisely to style them as per your requirements.

The selectors can be divided into several categories :

Universal selector
Individual selector
Class and Id selector
Chained selector
Combined selector
Inside an element
Direct child
Sibling ~ or +

Let's understand each category one by one with an example.

1. Universal selector

Syntax :

* {
        /* Write your styles here */
  }

Notice the * mark used just before the curly brackets, that is how the universal selector are used. It targets each an every HTML element on the page that has been rendered on the browser.

Let's see an example :

CSS snippet :

* {
        background-color: #4d4d4d;
        color: #ffffff;
  }

HTML snippet :

...
<body>
  <div>Welcome!</div>
  <span>Span is just a span, nothing more</span>
  <p>We all know paragraph</p>
</body>
...

In the above example <div>, <span> and <p> tags will get affected by the universal selector. They will have the background color - #4d4d4d and the text color - #ffffff.

Note : You can override the universal style by writing some other CSS styling to the element on which you don't want to apply the universal styling.

2. Individual selector

Syntax :

any-html-element {
        /* Write your styles here */
}

You can specify any HTML element to apply the individual selector. It will now check the entire DOM tree for that element and wherever it finds that element it will apply that CSS style to it.

Let's see an example :

CSS snippet :

p {
        background-color: #12aaf0;
        color: #000000;
}

HTML snippet :

...
<body>
  <p>Paragraph-01</p>
  <div>
    <p>Paragraph-02</p>
  </div>
</body>
...

In the above example, you can see that we have two <p> tags. First one is outside the div and second one is inside the div. In this case, both the <p> tags will have the same CSS styling that we have written using the individual selector syntax.

So, in the above example the <p> tags will have a background color - #12aaf0 and text color - #000000

3. Class and Id selector

The Syntax :

class selector syntax :

.classname {
        /* Write your styles here */
}

You can create a style for a particular class for any HTML element. The ( . ) dot is used to access the class for styling the element.

class selector example :

CSS snippet :

.warning {
        background-color: #ad1010;
        color: #ffffff;
        padding: 3px;
        border: 3px solid #ffffff;
}

HTML snippet :

...
<body>
  <p class="warning">Paragraph-01</p>
</body>
...

In the above example <p> tag has been assigned a class with value as warning. In the CSS the warning class has been accessed and few styles are added to it.

id selector syntax :

#idname {
      /* Write your styles here */
}

You can create a style for a particular id for any HTML element. The ( # ) pound or hash sign is used to access the id for styling the element.

id selector example :

CSS snippet :

#warning {
        background-color: #ad1010;
        color: #ffffff;
        padding: 3px;
        border: 3px solid #ffffff;
}

HTML snippet :

...
<body>
  <p id="warning">Paragraph-01</p>
</body>
...

The example above is same as the class selector example, only difference is that the id has been accessed using ( # ) sign. <p> tag has been assigned a id with value as warning. In the CSS the warning class has been accessed and few styles are added to it.

Note : Most of the time styling using class is preferred over id to create CSS styling of that element. id should generally be used for generating unique id's for list items.

4. Chained selector

Syntax :

element.class-name1.class-name2 {
        /* Write your styles here */
}

Here,

element == Any HTML element ( <p> , <li>, <div> etc. )
class-name1 == A class specified in that element
class-name2 == Another class specified in that element

Chained selectors allows us to target those HTML elements which has exact same class names defined in it. Only those elements will get affected who has all those class names which are in the chain.

What the syntax is saying, give me the element with these chained class names.

Let's see an example :

HTML snippet :

...
<body>
<ul>
      <li class="bg-black text-white">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
</ul>
</body>
...

CSS snippet :

li.bg-black.text-white {
     background-color: #000000;
     color: #ffffff;
}

So here, as we seen in the syntax

element == li
bg-black == A class specified in that element
text-white == Another class specified in that element

The element <li> with class names bg-black and text-white will be targeted in the given example. ( i.e. item1 of the <ul> list will have the CSS style )

5. Combined selector

Syntax :

element01,
element02 {
      /* Write your styles here */
}

Combined selectors allows us to target multiple elements at the same time. We can separate the elements by adding ( , ) commas between the elements.

In the above syntax it means, target element01 and element02 to apply the specified CSS style.

Let's see an example :

HTML snippet :

...
<body>
<span>Span is just a span, nothing more</span>
<p>We all know paragraph</p>
<ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
</ul>
</body>
...

CSS snippet :

span,
li {
    background-color: #000000;
}

In the above example we are targeting <span> and <li> elements. All the <span> and <li> elements will have the CSS style that has been mentioned in the CSS snippet. While the <p> element remains unchanged.

6. Inside an element

Syntax :

element01 element02 element03 {
        /* Write your styles here */
}

You can target the element which is nested deep in the DOM tree. In the above syntax, element03 is nested inside of element02 and element02 is inside of element01. Don't worry you will understand it better with an example.

Let's see an example :

HTML snippet :

...
<body>
    <div>
      <li>awesome</li>
      <ul>
          <li>highlight me</li>
          <li>highlight me</li>
      </ul>
      <li>test</li>
    </div>
</body>
...

CSS snippet :

div ul li {
     background-color: #383CC1;
}

In the above example,

Relation 1 :

<div> is the parent element
<li> , <ul> & <li> are the child elements of the <div>
<li> , <ul> & <li> yo can say are siblings

Relation 2 :

The <ul> inside the <div> is also a parent element
All the <li> inside the <ul> are child elements of the <ul>

Notice the indentation of the elements to understand what I am trying to convey here.

Now, coming back to the way we have targeted the nested element is as per the Relation 2. In the example above, the CSS will be applied to the <li> which is inside of the <ul> and all the other elements will be left unchanged.

7. Direct child

Syntax :

parent > direct-child {
        /* Write your styles here */
}

As we have seen how the relations are, we can target the direct child of the parent element.

Consider the same example that we have seen for inside an element. We can target the direct child of the <div> to apply the CSS to it.

Who are the direct child elements of <div> ?

<li> , <ul> & <li> are the direct child elements of the <div>

So, if we write some CSS like below :

div > li {
     background-color: #3DBE29;
}

Both the <li> elements will have the style as specified, as they are the direct child elements of <div>. The <ul> element remains unaffected as it is not the target element.

8. Sibling ~ or +

Syntax :

Using +

.class-name + next-element {
        /* Write your styles here */
}

Using ~

.class-name ~ next-element {
        /* Write your styles here */
}

Difference between + and ~ ?

Using + we can target the immediate or next sibling of that element.
Using ~ we can target all the immediate siblings of that element.

Let's see an example :

HTML snippet :

...
<body>
    <div>
        <section>
            <p>Test 1</p>
            <p class="sibling">Test 2</p>
            <p>Test 3</p>
            <p>Test 4</p>
            <p>Test 5</p>
      </section>
    </div>
</body>
...

CSS snippet using + :

.sibling + p {
        background-color: #E03B8B;
}

CSS snippet using ~ :

.sibling ~ p {
        background-color: #E03B8B;
}

In the CSS snippet using + the style will be applied on the immediate sibling which is below line <p class="sibling">Test 2</p>

i.e. <p>Test 3</p> will have the style that has been mentioned in the CSS.
In the CSS snippet using ~ the style will be applied to all the sibling <p> tags

i.e. <p>Test 3</p>, <p>Test 4</p> & <p>Test 5</p> will have the style that has been mentioned in the CSS.

That's it for this blog. I hope you have learnt something from it.

Happy coding. Thank you !

Prasad Kawalekar

Prasad Kawalekar

Let's learn CSS selectors !

Table of contents

1. Universal selector

2. Individual selector

3. Class and Id selector

4. Chained selector

5. Combined selector

6. Inside an element

7. Direct child

8. Sibling ~ or +