1

Quiero ocultar un elemento hermano con css, si tiene una etiqueta de clase en su interior. He estado haciendo pruebas con has:, pero no se como seleccionar el hermano.

introducir la descripción de la imagen aquí

Quiero ocultar el elemento la clase p-multiselect-header, si el elemento con clase .p-multiselect-items-wrapper con tiene algún elemento con la clase .multiselect-empty-message.

Sería algo así, pero no me funciona un selector para el elemento hermano.

.p-multiselect-header:has(+'.p-multiselect-items-wrapper'):has(>'.multiselect-empty-message') {
  display: none;
}
2
  • intenta directo identificando con la clase que no queres que se muestre prueba con esto .p-multiselect-header:has(.p-multiselect-items-wrapper) { display: none; }
    – Roy
    Commented el 14 mar. 2023 a las 16:07
  • Pero si te das cuenta es un elemento hermano, no descendente... Commented el 14 mar. 2023 a las 16:22

2 respuestas 2

1

Te va a resultar más facíl se empezas el selector desde el padre de ambos, es decir, desde .p-multiselect-panel.

Entonces podemos decir que:

  • Si .p-multiselect-panel tiene un hijo .p-multiselect-items-wrapper que tiene un hijo .p-multiselect-items y que tiene un hijo .p-multiselect-empty-message, entonces al hijo .p-multiselect-header lo ocultamos.

Ejemplo:

.p-multiselect-panel:has(>.p-multiselect-items-wrapper > .p-multiselect-items > .p-multiselect-empty-message)>.p-multiselect-header {
  display: none;
}
<div class="p-multiselect-panel">
  <div class="p-multiselect-header">Header</div>
  <div class="p-multiselect-items-wrapper">
    <ul class="p-multiselect-items">
      <li class="p-multiselect-empty-message">Empty</li>
    </ul>
  </div>
</div>

PD: La regla se puede simplificar a .p-multiselect-panel:has(.p-multiselect-empty-message) > .p-multiselect-header, pero si existe la posibilidad de tener elemento anidados se prestaria a error.

1

Podes usar el selector combinado de hermanos ~.

La sintaxis es:

hermano1 ~ hermano2

El estilo se aplica sobre los elementos hermano2 si se que estén después de un elemento hermano1 que comparta el mismo ancestro directo.

.contenedor:has(> .hijo) ~ .elemento {
    background: red;
}

.hijo, .elemento {
    background: green;
    height: 3em;
    width: 3em;
}

.contenedor {
    display: block;
    paddint: 8px;
}
<div class="elemento"></div>
<div class="contenedor">
  <div class="hijo"></div>
</div>
<div class="elemento"></div>

Otra forma que no depende del orden es a través del padre:

.padre:has(.nieto) .elemento {
    background: red;
}

.nieto, .elemento {
    background: green;
    height: 3em;
    width: 3em;
}
<div class="padre">
  <div class="elemento"></div>
  <div class="contenedor">
    <div class="nieto"></div>
  </div>
  <div class="elemento"></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.