0

intentaba modificar un elemento pero tenían el mismo nombre de clase anidado

<div class="wrap">
    <p>primer div</p>
    <div class="wrap">
        <p>segundo div</p>
        <div class="wrap">
           <p>tercer div</p>
        </div>
    </div>
</div>

¿Cómo podría modificar el segundo div con una hoja css sin afectar el primero ni al ultimo div de la clase "wrap"?

3
  • 1
    Revisa la documentación de los selectores CSS w3schools.com/cssref/css_selectors.asp
    – Lobos
    Commented el 7 sept. 2022 a las 2:28
  • primer elemento .wrap, segundo elemento, .wrap .wrap y este afecta al tercero, solo para el tercero podrias usar .wrap .wrap .wrap Commented el 7 sept. 2022 a las 3:19
  • El problema de usar .wrap .wrap es que eso se cumple tanto entre primer y segundo div, como entre segundo y tercero, si utiliza este método y por ejemplo cambia el color de la letra, cambiaría el color tanto en el segundo como tercer div. Commented el 7 sept. 2022 a las 3:54

3 respuestas 3

0

Hay varias maneras, primeramente se debe tomar todos los elementos con clase .wrap que sean hijos de un .wrap, puede ser de la siguiente manera

.wrap > .wrap {
  color: red;
}

O también puede ser:

.wrap:nth-child(2) {
  color: red;
}

Y la segunda parte es que los hijos de estos elementos que tengan la clase .wrap (y los hijos sucesivos) tengan propiedades diferentes:

.wrap > .wrap > .wrap {
  color: black;
}
1
  • En principio tanto la primera como la segunda opción cambiarían el color tanto del segundo como el tercer div. Esto es porque el segundo es padre del primero y manteniendo la misma estructura el tercero es padre del segundo. Commented el 7 sept. 2022 a las 3:32
0

En general se aplica clases cuando se quiere afectar a todos los elementos tengan esa clase, si bien hay selectores que podrían ayudar a alcanzar elementos hijos, debido a que la estructura es un tercer div dentro de un segundo, y luego ese segundo dentro del primero teniendo todos la misma clase, en muchos casos lo que se haga intentando seleccionar el segundo afecta al segundo y tercer div.

Para resolver esto se podría poner un id único al elemento que se desea modificar y luego se podría hacer algo así:

.wrap {
    background-color: antiquewhite;
}

#secondWrap > p {
    color: blue;
    font-size: 1.5rem;
}
#secondWrap > span {
    color: red;
    font-size: 1.5rem;
}
#secondWrap > a {
    color: orange;
    font-size: 1.5rem;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="test.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <p>primer div</p>
      <p>Test</p>
      <span>prueba</span>
        <a href="https://www.google.com">Ir a Google</a>
      <div class="wrap" id="secondWrap">
        <p>segundo div</p>
        <p>Test</p>
        <span>prueba</span>
        <a href="https://www.google.com">Ir a Google</a>
        <div class="wrap">
          <p>tercer div</p>
          <p>Test</p>
          <span>prueba</span>
          <a href="https://www.google.com">Ir a Google</a>
        </div>
      </div>
    </div>
  </body>
</html>

En este ejemplo se aplica color de fondo para todos los div con clase wrap, y se le aplica estílos específicos a los diferentes elementos que están dentro del elemento con id secondWrap.

El segundo div entonces quedaría de la siguiente manera:

<div class="wrap" id="secondWrap">

También es posible lograr lo mismo agregando una segunda clase al segundo div, sería de la siguiente manera:

En HTML:

<div class="wrap secondWrap">

En CSS:

.wrap {
  background-color: antiquewhite;
}

.wrap.secondWrap > p {
  color: blue;
  font-size: 1.5rem;
}
.wrap.secondWrap > span {
  color: red;
  font-size: 1.5rem;
}
.wrap.secondWrap > a {
  color: orange;
  font-size: 1.5rem;
}

En este caso se está seleccionando al elemento que tiene la clase wrap y la clase secondWrap.


Por último hay selectores de CSS que pueden ser útiles como el > para los childs y otros pseudo como nth-child, first-child, y otros.

Link a documentación: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors

3
  • También directamente puede poner .wrap>.wrap>.wrap {/*css aquí*/}, eso se aplicaría solo a la clase wrap anidada dentro de otra clase wrap anidada dentro de otra clase wrap
    – Benito-B
    Commented el 7 sept. 2022 a las 10:19
  • El problema con eso es que se cumple para el div 1 y 2 y también para el div 2 y 3 por la estructura que tiene.. Por lo que se afectaría en este caso al div 2 y div 3.. E incluso esto es si de acuerdo a tu ejemplo fueran 2 .wrap, pero en tu ejemplo estaría afectando al tercer div únicamente. Commented el 7 sept. 2022 a las 12:26
  • Leí mal la pregunta, efectivamente si se quiere afectar únicamente al segundo esto no sería válido, disculpa la confusión!
    – Benito-B
    Commented el 7 sept. 2022 a las 12:29
0

Aquí dejo un ejemplo sencillo con el que se puede ver/entender el uso de clases anidadas y descendientes directos. https://www.w3schools.com/cssref/css_selectors.asp

/* Todos los .wrap */
.wrap {
  font-weight: bold;
}
/* Todos los .wrap que vayan seguidos de un "título" */
p + .wrap {
  font-style: italic;
}

/* Primer .wrap que encontramos */
.wrap:first-child {
  background: red;
}
/* Tras localizar el primer elemento, buscamos un descendiente directo con clase .wrap */
.wrap:first-child > .wrap {
  background: green;
}
/* Anterior ejemplo, localizando el tercer descendiente */
.wrap:first-child > .wrap > .wrap {
  background: blue; 
}
<div class="wrap">
    <p>primer div</p>
    <div class="wrap">
        <p>segundo div</p>
        <div class="wrap">
           <p>tercer div</p>
        </div>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.