seleccionar - selector de hijos css
CSS: Seleccione el primer hermano adyacente (6)
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?
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.
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
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 :(
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.
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>
intente usar js para obtener nombre de clase getElementsby y si hay más de 1, use css:
ul li: primer hijo {display: none;}