---
title: "Select any element and change its property via nth-child selector"  
description: "Select any element and change its property via nth-child selector"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2023-11-26  
canonical: https://www.mindstick.com/forum/156648/select-any-element-and-change-its-property-via-nth-child-selector  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# Select any element and change its property via nth-child selector

How to [select](https://www.mindstick.com/forum/160534/orderby-then-select-vs-select-then-orderby-performance) any element and change its [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) via nth-child [selector](https://www.mindstick.com/interview/23419/action-selector-in-mvc)?

## Replies

### Reply by Aryan Kumar

Certainly! You can use the **:nth-child** selector to target a specific child element based on its position within its parent. Here's an example using jQuery to change the background color of the third child element of a container:

```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Property via nth-child Selector</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    /* Optional: Some styling for better visibility */
    .container {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }

    .child {
      width: 50px;
      height: 50px;
      background-color: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

<script>
  $(document).ready(function() {
    // Change the background color of the third child element
    $('.container .child:nth-child(3)').css('background-color', 'lightgreen');
  });
</script>

</body>
</html>
```

In this example:

- The **:nth-child(3)** selector is used to target the third child element within the **.container**.
- jQuery's **css()** method is then used to change the background color of the selected element.

You can customize the selector and the property changes based on your specific needs.


---

Original Source: https://www.mindstick.com/forum/156648/select-any-element-and-change-its-property-via-nth-child-selector

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
