In todays article, we will be discussing 12 different CSS selector tags. Selectors are a way of targeting all specific elements that you want to style, using CSS. Below we will go in depth into twelve differenet selectors. By the end of this article you should feel comfortable using these selectors in your own code.

Element Selector

An element tag targets all elements with the specified element name. In this example, we will use "h1" and "p" as our CSS element tags.

            


                HTML
                
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
        h1 {
            color: blue;
            text-decoration: underline;
            font-style: italic;
        }

        p{
            color: blue;
            background-color: lightblue;
        }

Output

Title

Lorem ipsum dolor sit amet.

As you can see, from selecting the html tag, known as an selector in CSS, we can directly modify its appearance with a variety of CSS properties. To see an exhaustive list of CSS properties, please visit W3Schools CSS Reference.

.class Selector

A class is an identifier put on HTML tags. You may use a class as many times as you'd like. After typing in your HTML tag, before the closing bracket, type ' class="class-name" '. Once you begin your CSS code, you may target all of the tags associated with your chosen class, and modify their apperance together. To use a class in CSS, type ' .class-name {}'

            


                HTML
                
        <h1>Title</h1>


        <p class="paragraph">Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet.</p>

        <p class="paragraph">Lorem ipsum dolor sit amet.</p>

                CSS
                
        h1 {
            color: blue;
            text-decoration: underline;
            font-style: italic;
        }
    
        p{
            color: red;
            background-color: lightcoral;
        }

        .paragraph {
            color: green;
            background-color: lightgreen;
        }

            Output

Title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet

Here, the first and third paragraph tags have been associated with a "paragraph" class. In the CSS code, those paragraphs are targeted with the .paragraph selector. With the chosen properties, these two paragraphs show green while the paragraph without a class is targeted by the p element alone, and shows as red.

#id Selector

An ID selector is essentially the same as a class selector, with the only exception being that you can only use an ID once in your HTML code. To associate an HTML tag with an ID, type ' id="id-name" ' within the associated tag. Then, in your CSS, type ' #id-name {}' in order to work with it.

            


                HTML
                
        <h1>Title</h1>


        <p id="paragraph">Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
        h1 {
            color: blue;
        }
    
        p{
            color: red;
            background-color: lightorange;
        }

        #paragraph {
            color: black;
            background-color: white;
        }

            Output

Title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet

The first paragraph tag has been targeted with an ID. Because we can only use an ID once, it is often saved for more important items that appear on the webpage. In this simple example, we just reserved it for the first paragraph tag. In the output, we can see that the first paragraph tag does indeed show up with a different apperance.

:empty Selector

The empty selector is a little different than what we have covered above. This selector can be targeted when an HTML has no HTML children or text. Just to note, comments, CSS content (in-line styling) and processing instructions do not affect the empty selector. In order to use this in CSS, choose whichever empty element you would like to target, followed by ' :empty '. If our element was p, for example, it would be 'p:empty{}'

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p></p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
        h1 {
            color: blue;
        }
    
        p{
            color: blue;
            background-color: lightblue;
        }

        p:empty {
            background-color: orange;
        }

            Output

Title

Lorem ipsum dolor sit amet.

In this example, the second p tag contains no text / whitespace, or children. Therefore, when it is targeted by the :empty selector with the given properties, we are able to change its appearance to something specific. One thing to watch out for with using the :empty tag is it is not compatable with screen readers. It would not be the best to use this as a way to convey a message, as those with specific accessibility concerns will not be able to understand the message.

:first-of-type Selector

The :first-of-type selector allows you to target the first element of its parent. For example, if you had 4 p tags in a row, using this selector would target only the first p. To use this selector in CSS, type in the element followed by :first-of-type. For example, for p, it would be ' p:first-of-typye{} '.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
        h1 {
            color: blue;
        }
    
        p{
            color: blue;
            background-color: lightblue;
        }

        p:first-of-type {
            color: black;
            background-color: pink;
        }

            Output

Title

Lorem ipsum dolor sit amet.

In our final example, we see that no matter how many of the same child tag you may have within a parent tag, by using this selector you can easily just target the first element rather than needing a Class or ID.

* Selector

The * selector allows you to target all elements.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
        * {
            color: yellow;
        }

            Output

Title

Lorem ipsum dolor sit amet.

By using the * selector, you can target all elements and design them all to be within your specifications.

::first-letter Selector

The ::first-letter selector allows you to select the first letter of a given element.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
    
        p::first-letter {
            color: yellow;
            font-size: 20px;
        }

            Output

Title

Lorem ipsum dolor sit amet.

With this selector, you can target the first letter of whichever given selector you pick and control its appearance however you may like. This selector can only be used with block-level elements.

::first-line Selector

The ::first-line selector allows you to select the first line of a given element, very similar to the ::first-letter selector.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet 
        consectetur adipisicing elit. Nostrum 
        quisquam blanditiis modi obcaecati 
        accusantium natus, laudantium, reiciendis 
        quia dolore temporibus, quo sit nihil 
        molestiae! Optio quisquam cumque beatae 
        iure hic.</p>

                CSS
                
    
        p::first-line {
            color: pink;
            font-size: 20px;
        }

            Output

Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum quisquam blanditiis modi obcaecati accusantium natus, laudantium, reiciendis quia dolore temporibus, quo sit nihil molestiae! Optio quisquam cumque beatae iure hic.

Similarly to the ::first-letter selector, we can choose the first line of a given selector and modify its appearance. Handy for giving lengthy paragraphs some pizzazz! Note that this does not mean the first sentence - however, the first line in the corresponding div. Worked in media query! This selector can only be used with block-level elements.

:first-of-type Selector

The :first-of-type selector allows you to select the first type of a presented selector in a series of the same selector. For example, if you have multiple li's, this will select only the first element.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
    
        p:first-of-type {
            color: green;
            font-size: 20px;
        }

            Output

Title

Lorem ipsum dolor sit amet.

As we can see from the above example, whichever selector you choose to join with the :first-of-type selector will choose the first of that type from a list and you can design it from there.

element, element Selector

The element, element selector allows you to select two selectors and apply changes to both within the same lines.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
    
        h1, p{
            color: purple;
            background-color: white;
        }

            Output

Title

Lorem ipsum dolor sit amet.

A great way to condense code! Add all elements that you want to look the same, just separated by a comma.

element + element Selector

The element + element selector allows you to select the selector immediately after the other specified selector. For example, if you did h1 + p, you would be selecting the first p immediately after the h1.

            


                HTML
                
        <h1>Title</h1>


        <p>Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet</p>

        <p>Lorem ipsum dolor sit amet.</p>

                CSS
                
    
        h1 + p{
            color: orange;
            background-color: lightyellow;
        }

            Output

Title

Lorem ipsum dolor sit amet.

This is a great way of being able to choose the first child element without needing to use IDs or classes.

12 CSS Selectors To Know

Element Selector

Title

.class Selector

Title

#id Selector

Title

:empty Selector

Title

:first-of-type Selector

Title

* Selector

Title

::first-letter Selector

Title

::first-line Selector

Title

:first-of-type Selector

Title

element, element Selector

Title

element + element Selector

Title