CSS – How to select the First element inside a DIV element

Using CSS :first-child selector and :nth-child() pseudo-class. You can use these two simple CSS selectors to select the first element inside a DIV element.

At the end of this post, you will find a list of another 9 CSS Pseudo-classes.

:first-child selector

Using the :first-child selector, you can target or select the very first element inside an element, like a DIV. You can use any other element as a container like <section> or <article> etc.

Here’s an example.

I have three child elements inside the parent <div> element. I want to target the 1st element, a <p> element and add some special style to it.

<head>
    <style>
        #container>:first-child {
            text-align: right;
            border: dotted 2px red;
        }
    </style>
</head>
<body>
    <div id='container'>
        <p> element 1 </p>
        <div> element 2 </div>
        <div> element 3 </div>
    </div>
</body>

Try it

The pseudo-class selector :first-child is used to style elements that fall into the parent-child relationship.

Note: A pseudo-class has a colon :. For example a:hover { font-size: 10px; }

Here’s another way you can use the above example. Instead of id reference, I am not using the element reference.

div>:first-child {
    text-align: right;
    border: dotted 2px red;
}

The result will be same.

Using :nth-child() selector

This pseudo-class selector is used to match elements based on their position in a group of child elements. Again, there should be a parent child relationship among elements to work with this selector.

div>:nth-child(1) {
    text-align: right;
    border: dotted 2px red;
}

Try it

The :nth-child() selector takes a parameter, which can be a number, a keyword like odd or even or an expression. Read more about :nth-child().

I have provided it with the number 1, since I am targeting the first child element.

You can use id reference too.

#container>:nth-child(1) {
    text-align: right;
    border: dotted 2px red;
}

CSS Pseudo-classes with example

1) :active - The pseudo class :active styles an element when it becomes active. For example, when a button is clicked, it becomes active.

2) :before - You can use the :before class to some content (like a text etc.) before an existing content. See this example

3) :after - You can use the :after pseudo class to add some content after an existing content. See this example

4) :first-child - The :first-child represents the first element among a group of elements. See this example

5) :first-of-type - The :first-of-type selector targets the first occurrence of its type inside a container or a group of elements. Learn more about it.

6) :first-letter - The :first-letter applies style to the first letter of a string or a sentence. See this example

7) :first-line - The :first-line applies style to the first line in a block level element.

8) :focus - The :focus pseudo class is used to style an element when focus is set on it. Here's an example.

9) :hover - The :hover pseudo-class applies style to an element when a user hovers the mouse over the element.

← PreviousNext →