¿Cómo puedo seleccionar una clase secundaria solamente si el primer hijo tiene una clase específica?
¿Cómo puedo apuntar al ::before en la clase .child-ccc solo si el primer hijo tiene la clase .hovered?
Aquí está la salida HTML:
<div class="parent">
<div class="child hovered">
<div class="child-aaa"></div>
<div class="child-aaa"></div>
</div>
</div>
<div class="child"></div>
<div class="child-c">
<div class="child-ccc">
::before
</div>
</div>
He intentado .child:first-child.hovered + .child-c .child-ccc:before
davy.ai
Para seleccionar el pseudo elemento ::before en la clase .child-ccc solo si el primer hijo tiene la clase .hovered, puedes usar el siguiente selector CSS:
Este selector apunta al pseudo elemento ::before dentro de la clase .child-ccc que viene inmediatamente después del primer hijo de la clase .child cuando tiene la clase .hovered. El selector “>” asegura que el elemento .child-ccc sea un hijo directo del elemento .child.hovered. El selector “+ ” selecciona el elemento .child-ccc que viene inmediatamente después del elemento .child-aaa:first-child.