2

¿Cómo acceder a los hijos del padre de un elemento sólo con CSS?

Me refiero a que si tengo una estructura donde hay un padre que contiene un div y varios botones, el estilo de los botones depende del id del div.

Sólo lo he conseguido de una manera, Pero me gustaría saber si actualmente hay otras formas solo con CSS, porque con JavaScript se que es sencillo. Este es mi ejemplo:

#red-message ~ .button{
    color:red;
}

#blue-message ~ .button{
    color:blue;
}
<div class="parent">
    <div id="red-message">Red Team</div>
    <button class="button">button1</button>
    <button class="button">button 2</button>
    <button class="button">button 3</button>
</div>

<div class="parent">
    <div id="blue-message">Blue Team</div>
    <button class="button">button1</button>
    <button class="button">button2</button>
    <button class="button">button 3</button>
</div>

5
  • 1
    La manera que has usado es la única disponible con CSS ya que no tenemos la posibilidad de acceder a ancestros o a hermanos anteriores, solamente a descendientes o hermanos posteriores.
    – phpMyGuel
    el 30 jun. 2021 a las 9:22
  • Vale. al menos queda el código para los que requieran darle uso. el 30 jun. 2021 a las 9:24
  • 1
    Ceo que la pregunta debiera ser ¿cómo seleccionar bloques hermanos (adyacentes) con CSS?
    – Juan
    el 30 jun. 2021 a las 9:28
  • 1
    puedes cambiar la estructura de tu html, meter los botones dentro de blue-message y seleccionarlos con el selector #blue-message button. Obviamente esto te puede servir si no se rompe tu layout
    – hawks
    el 30 jun. 2021 a las 14:35
  • 1
    pues puedes utilizar last-child() para seleccionar ciertos elementos en los bloques adyacentes pero te tomaria mas lineas de stilos y no seria muy ordenado para el codigo en Css
    – user267954
    el 30 ene. 2022 a las 7:16

1 respuesta 1

1

¡Hola!

Actualmente esa es la única forma de aplicar estilos a los hermanos de un elemento.

Si sólo quisieras aplicárselo al primer botón de cada grupo podrías con:

#red-message + .button {
    color: red;
}

#blue-message + .button {
    color: blue;
}
Esto se aplica a los .button que vayan directamente detrás de #red-message o #blue-message.

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.