CSS: Seleccione el primer hermano adyacente

tengo una lista HTML de este modo:CSS: Seleccione el primer hermano adyacente

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

Desde Título 1 no tiene ningún texto debajo de ella, quiero ocultarlo con CSS.

Si hago esto,

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

Oculta Título 2 en lugar de dirigirse 1.

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

Fuente

2012-01-12 Jeremy

¡Utilice javascript! – greut

@greut: Si no puedo encontrar un selector de CSS para hacer esto, usaré Javascript. – Jeremy

Jeremy, no entiendo muy bien a qué te refieres con "primer hermano adyacente". ¿No puedes usar ': first-child'? – BoltClock

No es posible el uso de CSS como actualmente definido e implementado. Se requerirá un selector que seleccione un elemento en función de sus hermanos después de él. selectores CSS pueden seleccionar un elemento sobre la base de precedente o elementos exteriores, pero no en la base de los siguientes o elementos internos.

El efecto deseado se puede lograr utilizando JavaScript de una manera bastante sencilla, y usted puede decidir, dependiendo de la finalidad, si solo quita los elementos de la pantalla o los elimina por completo del árbol de documentos.

Fuente

2012-01-12 00:38:41

+11

En lugar de recurrir a JavaScript, probablemente tendría más sentido cambiar la estructura HTML para que * se * pueda lograr con CSS ... –

Gracias por la respuesta detallada. – Jeremy

@ ŠimeVidas Solo quiero señalar que hay situaciones en las que no se tiene control sobre el HTML (por ejemplo, leer HTML directamente desde la base de datos - ugh ...) pero se tiene control sobre el JavaScript. Pero estoy de acuerdo en que sería mejor si es posible. –

Hay algunas maneras de ocultar sólo el "Título 1" solamente:

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

alternativa:

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

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

Fuente

2012-01-12 00:38:35 bookcasey

Ninguna de esas soluciones funcionó. En el primer caso, podría no querer ocultar el primer hijo si hubiera un "Texto bajo el título 1". El segundo caso no funcionó cuando lo probé. Parece que CSS no es compatible con lo que quiero hacer. – Jeremy

El funcionario CSS3 Spec no es compatible actualmente con algo como esto, aunque me doy cuenta de que sería útil.

Me gustaría tratar de hacer búsquedas por alguna prebuilt javascript o jQuery scripts/bibliotecas para añadir selectores CSS. Aunque nunca me he encontrado con nada.

Si encuentra algo, por favor publíquelo aquí.

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

Ojalá tuviera una mejor respuesta para usted. Lo sentimos :(

Fuente

2012-01-12 01:56:15

Es posible orientar primer hermano con CSS, con algunas limitaciones.

Para el ejemplo de la cuestión que 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.

Fuente

2013-02-15 10:43:20

trate de usar JS para getElementsby Nombre de clase y si hay más de 1, entonces utilizar CSS:

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

Fuente

2014-10-01 02:18:47

Sé que esta pregunta tiene ya una respuesta marcada válida , pero tal vez otras personas quieran usar mi solución de solo 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 todos en un contenedor. Entonces con margin-top: -1px hice colapsar sus fronteras. Como siguiente paso, tuve que modificar los estilos de la primera, cada alerta en el medio y la última alerta. Y esto también debería verse bien para una sola alerta, dos alertas yn 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>

Fuente

2015-07-06 10:12:48 FTav

CSS: Seleccione el primer hermano adyacente

Respuesta

Cuestiones relacionadas