Select second Child element inside Parent element using CSS

You have a list of elements inside a parent element and you want to select the second element only, for some reason, using only CSS. How will do that? Its simple. You can use the CSS :nth-child selector to select a particular element or the nth element, inside its parent element.

Let us assume, I have a 3 different images, each inside a element and all the ’s are inside a <div> (the parent element) and I want to change the style of 2nd element only.

<!DOCTYPE html>
<html>
<head>
<style>
    /* 	tranform (rotate) the 2nd element */
    .container > p:nth-child(2) {
        transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        display: inline-block;
    }
    img {
        border: none;
        width: 75px;
    }
</style>
</head>
<body>
    <div class='container'>
        <p>
            <img src='../../images/theme/googlemaps.png'>
        </p>
        <!--         want to select and change style of this element only. -->
        <p>
            <img src='../../images/theme/javascript.png'>
        </p>
        <p>
            <img src='../../images/theme/sqlserver.png'>
        </p>
    </div>
</body>
</html>

Try it

Here, I am rotating the 2nd element inside the parent element.

.container > p:nth-child(2) { … }

You have to mention the parent container along with the :nth-child selector. I have used the class name of the container. However, you can also use the container’s id.

Now, here’s another scenario. Along with an image inside the 2nd element, I have another element, let’s say, a , with a text. If I use the above example, it will rotate (or style) the span and the image. However, I want to select only the image, not the text. Here’s how I’ll do it.

.container > p:nth-child(2) img {
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    display: inline-block;
}

I have added "img" after the :nth-child selector.

👉 You may like this How to animatedly rotate an Image using Pure CSS

Point to Remember

Web designers often use in-line styles on various elements. The nth-child may not show you the desired result in such cases. You can over-ride the inline styles by using the !important property with the nth-child selector.

Let us assume, inside the <img> element you have defined border: none

and later you realized the image needs a border. Just do this…

.container > p:nth-child(2) img {
border: solid 1px red!important;
}

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 →