How to Add CSS Class to a Parent HTML Element using JavaScript

/ Javascript / 3 minutes of reading

When working with the Document Object Model (DOM), manipulating elements dynamically is crucial. One common requirement is to add a CSS class to a parent element based on certain conditions or user interactions. In this blog post, we will explore multiple ways to achieve this, using HTML, CSS, and JavaScript.

Table Of Contents
  1. Method 1: Using the Parent Element's ClassList
  2. Method 2: Using the ParentNode Property
  3. Method 3: Using the closest Method
  4. 🧪Practice Coding Problem: Adding CSS Class to Parent Element

Method 1: Using the Parent Element’s ClassList

You can directly access the parent element’s classList property and use the add method to add a class.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Adding CSS Class</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="parentElement">
      <p>This is the parent element.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>
JavaScript
const parentElement = document.getElementById('parentElement');
parentElement.classList.add('newClass');
CSS
.newClass {
  background-color: lightblue;
}

This method directly adds the specified class to the parent element.

Method 2: Using the ParentNode Property

The parentNode property allows you to access the parent node of an element.

HTML
<!-- Same as Method 1 (lets keep it DRY, 🙏)-->
JavaScript
const childElement = document.querySelector('p');
childElement.parentNode.classList.add('newClass');
CSS
/* Same as Method 1 (lets keep it DRY, 🙏) */

This method is useful when you have a reference to the child element, and you want to add a class to its parent.

Method 3: Using the closest Method

The closest method traverses the DOM and returns the closest ancestor element matching a selector.

HTML
<!-- Same as Method 1 (lets keep it DRY, 🙏)-->
JavaScript
const childElement = document.querySelector('p');
const parentElement = childElement.closest('#parentElement');
parentElement.classList.add('newClass');
CSS
/* Same as Method 1 (lets keep it DRY, 🙏) */

This method is helpful when you want to find the closest ancestor that matches a specific selector.

🧪Practice Coding Problem: Adding CSS Class to Parent Element

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

You have a webpage with a list of items, and each item has a button. Your task is to implement JavaScript code that adds a CSS class to the parent
element when the button is clicked.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Parent Class Addition</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <ul>
      <li>
        <p>This is item 1.</p>
        <button onclick="addParentClass(this)">Add Class</button>
      </li>
      <li>
        <p>This is item 2.</p>
        <button onclick="addParentClass(this)">Add Class</button>
      </li>
      <!-- Add more items as needed -->
    </ul>
    <script src="script.js"></script>
  </body>
</html>

Your JavaScript code (script.js) should contain a function addParentClass that takes a reference to the button element as a parameter and adds a CSS class to its parent `<li>` element. Assume that the CSS class to be added is named “highlighted”.

Additionally, create a styles.css file to define the style for the “highlighted” class.

After clicking the “Add Class” button for a specific item, the parent `<li>` should visually indicate that it has been highlighted.

Note: Avoid using global variables or excessive global scope pollution. Encapsulate your code appropriately.

Please attempt before seeing the Answer:
JavaScript
function addParentClass(button) {
  // Get the parent <li> element of the clicked button
  const parentLi = button.parentNode;

  // Add the "highlighted" class to the parent <li>
  parentLi.classList.add('highlighted');
}
CSS
/* styles.css */

/* Define the style for the "highlighted" class */
.highlighted {
  background-color: #ffcc00; /* Yellow background color */
}

In this solution:

  • The addParentClass function takes a reference to the button as a parameter.
  • It uses the parentNode property to get the parent `<li>` element
  • The classList.add method is used to add the “highlighted” class to the parent `<li>`

Test your solution by opening the index.html file in a web browser and clicking the “Add Class” buttons for different items. The parent <li> elements should visually indicate that they have been highlighted.

Whether you directly manipulate the classList or use methods like parentNode or closest, these approaches provide flexibility in handling parent elements dynamically.

Keep tinkering and keep coding! 🚀

Related Posts

Start typing and press enter to search

Scroll to Top