Add new class to children container in HTML/CSS with Javascript

Question

I'm a beginner in javascript with HTML and CSS. I want to try is there a way to access child container class via parent container class. or can I add a new class("second_new") to "second" class via "first" class.

/* CSS */
.first {
  background-color: red;
}

.first_new {
  background-color: pink;
}

.second {
  background-color: blue;
}

.second_new {
  background-color: purple;
}

<!-- HTML -->
<div class="row">
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  
</div>
<!-- JAVASCRIPT -->
<script>
    var firstClass = document.getElementsByClassName("first");

    function Mousein() {
        this.classList.add("first_new");

    };
    
    function Mouseout() {
        this.classList.remove("first_new");

    };

    for (var i = 0; i < firstClass.length; i++) {
        firstClass[i].addEventListener('mouseover', Mousein);
        firstClass[i].addEventListener('mouseout', Mouseout);

    }
</script>

Are you asking for a way to select these elements in a CSS rule for formatting purposes (then make use of :first-child/:last-child or :nth-child), or do you need to access them via JavaScript? — C3roe
– C3roe, Commented Jan 24, 2022 at 8:01
Does this answer your question? If I understood your problem right, the accepted answer here should be what you need. — SmilyLily
– SmilyLily, Commented Jan 24, 2022 at 8:03
You can target the second div in CSS like .first_new .second { /* some styling */ } — StackByMe
– StackByMe, Commented Jan 24, 2022 at 8:03
@SmilyLily thanks Thank you that's what I've been looking for all this time — Copernove
– Copernove, Commented Jan 24, 2022 at 8:19

Sarout · Accepted Answer · 2022-01-24 08:17:11Z

1

yes you can

Method 1

document.querySelector('.first .second');

Medthod 2

let parent = document.querySelector('.first');
parent.querySelector('.second');

answered Jan 24, 2022 at 8:17

Sarout

9001 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Copernove · Accepted Answer · 2022-01-24 08:28:48Z

1

Thanks Guys I found the answer this

/* CSS */
.first {
  background-color: red;
}

.first_new {
  background-color: pink;
}

.second {
  background-color: blue;
}

.second_new {
  background-color: purple;
}

<!-- HTML -->
<div class="row">
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  
</div>
<!-- JAVASCRIPT -->
<script>
    var firstClass = document.getElementsByClassName("first");
    var child;

    function Mousein() {
        this.classList.add("first_new");
        child = this.querySelector(".second");
        child.classList.add("second_new")

    };
    
    function Mouseout() {
        this.classList.remove("first_new");
        child.classList.remove("second_new")

    };

    for (var i = 0; i < firstClass.length; i++) {
        firstClass[i].addEventListener('mouseover', Mousein);
        firstClass[i].addEventListener('mouseout', Mouseout);

    }
</script>

answered Jan 24, 2022 at 8:28

Copernove

338 bronze badges

1 Comment

Maik Lowrey Over a year ago

you can check if the classList toggle function too. But this approach works nice! Upvote from from me!

Maik Lowrey · Accepted Answer · 2022-01-24 08:06:01Z

0

Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first .second');

answered Jan 24, 2022 at 8:06

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Comments

atpriyanshu · Accepted Answer · 2022-01-24 09:19:31Z

0

You can use getElementsByTagName() on any type of element. This would be

var parents = document.getElementsByClassName('parent');
var child = [];

for (let i = 0; i < parents.length; i++) {
  var child = parents.getElementsByTagName('div')[0];
  children.push(child);
}

Or, Even Simpler:

var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');

Note: Elements selected by querySelectorAll() are like arrays and array methods can be applied. Note: To select one element use querySelector() method.

edited Jan 24, 2022 at 9:19

answered Jan 24, 2022 at 8:30

atpriyanshu

13 bronze badges

Collectives™ on Stack Overflow

Add new class to children container in HTML/CSS with Javascript

4 Answers 4

Method 1

Medthod 2

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Method 1

Medthod 2

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related