Skip to main content
CSS

Select Child Element of Parent in CSS Using nth-child

By March 9, 2018No Comments

This is an example of how to select a child of a parent element using CSS.  Most of the time you can add a class or id to the element and target with the normal methods, but when using plugins or other libraries it can get more complex than needed.  Some libraries generate the code dynamically and unless you’re willing to dig through the code for that function and update this is the next best solution.  It’s not ideal to modify the source code of many libraries as it handicaps your ability to quickly upgrade in the future.

Due to all of the above, he’s a simple way to target those elements where you don’t have a specific class or id using the nth-child method.  In this example I’m targeting the second “<p>” element on my page and setting the background color to red.

The CSS code below is how I’m targeting the second “<p>” element in my “<div>”.  My “<div>” has a class of “parentClass”.

.parentClass p:nth-child(2) {
            background: red;
}

 

Here’s the entire “<div>” with the class “parentClass”.

<div class="parentClass">
      <p>This is the first child.</p>
      <p>This is the second child.</p>
      <p>This is the third child.</p>
      <p>This is the fourth child.</p>
      <p>This is the fifth child.</p>
</div>

 

As you can see in the CSS code, I’m selecting the parent class and then counting down to the second “<p>” element and applying the style.

Here’s the entire page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="How to select a child element of a parent in CSS using the nth-child selector.">
    <meta name="author" content="Projex">

    <title>How to select a child element of a parent in CSS</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/pricing.css" rel="stylesheet">

    <style>
        body{background-color: grey;}
        p{color: #fff;}
        .parentClass p:nth-child(2) {
            background: red;
        }
        .giveSpace{
            padding-top:40px;
        }
    </style>
</head>

<body>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal"><img src="https://www.prodjex.com/wp-content/uploads/2017/10/dsmall.png.webp"/></h5>
    <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="https://www.prodjex.com">Home</a>
        <a class="p-2 text-dark" href="https://www.prodjex.com/web-development-blog/">Web Development Blog</a>
    </nav>
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <div class="col-md-12">
        <h1 class="display-4">CSS :nth-child() Selector</h1>
        <p class="lead">How to select a child element of a parent in CSS using the nth-child selector.<br>In this example we will be targeting the 2nd child of the "parentClass" div.</p>
    </div>
    <div class="col-md-12 giveSpace">
        <h2>This is the parentClass div</h2>
        <div class="parentClass">
            <p>This is the first child.</p>
            <p>This is the second child.</p>
            <p>This is the third child.</p>
            <p>This is the fourth child.</p>
            <p>This is the fifth child.</p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

 

You can view a working demo of this here.

Tags:

Leave a Reply