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>yes you can
document.querySelector('.first .second');
let parent = document.querySelector('.first');
parent.querySelector('.second');
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>Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first .second');