seleccionar - selector de hijos css

CSS: Seleccione el primer hermano adyacente

Question

Tengo una lista de HTML como tal:

<ul>
  <li class="heading">Heading 1</li>
  <li class="heading">Heading 2</li>
  <li>Text Under Heading 2</li>
</ul>

Como el encabezado 1 no tiene texto debajo, quiero ocultarlo con CSS.

Si hago esto,

li.heading + li.heading { display: none; }

oculta el Título 2 en lugar del Título 1.

¿Cómo puedo ocultar el Título 1? ¿Hay alguna forma de buscar hermanos adyacentes y seleccionar el primero?

Answer 1

Es posible dirigirse al primer hermano con CSS, con algunas limitaciones.

Para el ejemplo en la pregunta se podría hacer con algo como esto

li.heading { display: none; }                   /* apply to all elements */
li.heading + li.heading { display: list-item }  /* override for all but first sibling */

Esto funciona, pero requiere que pueda establecer explícitamente los estilos en los hermanos para anular la configuración para el primer hijo.

Answer 2

Hay algunas formas de ocultar solo el "Encabezado 1" solo:

ul li:first-child {display:none;}

Alternativamente:

li.parent{ display: none; }
li.parent + li.parent { display: list-item; }

Además, <li>Child of Heading 2</li> no es un elemento secundario de <li class="parent">Heading 2</li> . Es un hermano

Answer 3

La especificación oficial de CSS3 no admite actualmente nada como esto, aunque me doy cuenta de que sería útil.

Intentaría hacer búsquedas de algunos scripts / bibliotecas javascript o jquery precompilados para agregar selectores CSS. Aunque nunca he encontrado nada.

Si encuentras algo, por favor publícalo aquí.

Si no encuentra nada, también puede hacerlo manualmente o intentar encontrar una solución completamente diferente.

Desearía tener una mejor respuesta para ti. Lo siento :(

Answer 4

No es posible usar CSS como se define e implementa actualmente. Requeriría un selector que seleccione un elemento sobre la base de sus hermanos posteriores. Los selectores de CSS pueden seleccionar un elemento sobre la base de elementos anteriores o externos, pero no sobre la base de elementos siguientes o internos.

El efecto deseado se puede lograr utilizando JavaScript de una manera bastante directa, y puede decidir, dependiendo del propósito, si simplemente elimina los elementos de la pantalla o los elimina completamente del árbol de documentos.

Answer 5

Sé que esta pregunta ya tiene una respuesta marcada válida, pero tal vez otras personas quieran usar mi solución solo para css:

Quería tener una lista de alertas (en este caso, alertas de arranque) en un contenedor y su borde para colapsar. Cada alerta tiene un radio de borde, que parece bastante tonto cuando están todas en un contenedor. Así que con margin-top: -1px hice colapsar sus bordes. Como paso siguiente, tuve que modificar los estilos de la primera alerta, cada alerta intermedia y la última alerta. Y esto también debería verse bien para una sola alerta, dos alertas y n alertas.

.alert {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin: 0;
}

// set for the first alert that it should have a rounded top border

.alert:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

// set for the last alert that it should have a rounded bottom border
// if there is only one alert this will also trigger it to have a rounded bottom border aswell

.alert+.alert:last-child {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders

.alert+.alert:not(:last-child) {
  margin-top: -1px;
  border-radius: 0;
}

// for each following alert in between we remove the top rounded borders and make their borders collapse

Y aquí hay una plantilla angular para múltiples alertas.

<div id="alertscontainer">
    <div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="''alert-'' + alert.class">
        {{alert.body}}
    </div>
</div>

Answer 6

intente usar js para obtener nombre de clase getElementsby y si hay más de 1, use css:

ul li: primer hijo {display: none;}