es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Selección de CSS: alternar entre elementos nth dentro de una clase ancestral.

27 Jul, 2023 Programación

Tengo dos clases anidadas dentro de un ancestro común como:

<div class="css-18e3th9">
  <div class="x1">
    <div class="x2">
    ..
      <div class="css-t0qh0m">
      </div>
    ..
    </div>
  </div>
  ..
</div>

..
<div class="x1">
  <div class="x2">
    ..
      <div class="css-t0qh0m">
      </div>
    ..
    </div>
  </div>

Hay muchos divs y clases entre el ancestro común (css-18e3th9) y la clase objetivo: css-t0qh0m. No puedo contar todas las clases intermedias y pueden cambiar dinámicamente con el tiempo.

Deseo estilizar las clases objetivo, css-t0qh0m, de forma diferente. ¿Cómo las selecciono individualmente? Actualmente solo hay dos clases objetivo, pero podría haber más en el futuro.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes usar el selector descendente de CSS para seleccionar las clases objetivo, sin importar la cantidad de clases intermedias. El selector descendente utiliza un espacio para seleccionar elementos que están anidados dentro de otro elemento.

    En este caso, puedes utilizar el siguiente selector para seleccionar la clase css-t0qh0m dentro de cada conjunto anidado de clases x1 y x2:

    .css-18e3th9 .x1 .x2 .css-t0qh0m {
  /* Tus estilos aquí */
}

    El selector .css-18e3th9 selecciona al ancestro común, asegurando que las clases .css-t0qh0m solo se seleccionarán dentro de ese ancestro. Los selectores .x1 y .x2 se utilizan para descender hasta las clases css-t0qh0m, sin importar cuántas clases intermedias haya.

    Al utilizar este selector, puedes dar estilo a cada clase css-t0qh0m de manera independiente, incluso si hay múltiples instancias de ella dentro de la estructura anidada.

Comments are closed.