Soy principiante en javascript con HTML y CSS. Quiero probar si hay alguna manera de acceder a la clase de contenedor secundario a través de la clase de contenedor principal. o puedo agregar una nueva clase ("segunda_nueva") a la "segunda" clase a través de la "primera" clase.
/* 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>sí tu puedes
document.querySelector('.first .second');
let parent = document.querySelector('.first'); parent.querySelector('.second');Gracias chicos encontre la respuesta a esto
/* 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>Sí, puedes acceder al selector de bey. document.querySelector('parent child') . En tu caso sería: const childEl = document.querySelector('.first .second');