Tengo una lista HTML así:

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

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

Si hago esto,

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

oculta de la Rúbrica 2 en lugar de la Partida 1.

¿Cómo puedo ocultar el Título 1? Es allí una manera de buscar adyacentes a los hermanos y seleccione el primero?

  • El uso de javascript!
  • Si no puedo encontrar un selector CSS para ello, voy a utilizar Javascript.
  • Jeremy, yo no entiendo muy bien qué quieres decir con «la primera de hermanos adyacentes». No puedes simplemente usar :first-child?
  • en una nota de lado, este HTML es poco semántica. ¿Por qué no usar una etiqueta de encabezado para ser un título?? si usted hace esto usted puede encontrar los otros problemas se resolverán por sí mismos.
InformationsquelleAutor Jeremy | 2012-01-12

7 Comentarios

  1. 13

    No es posible el uso de CSS, ya que actualmente definido e implementado. Se requeriría de un selector que se selecciona un elemento en la base de sus hermanos después de ella. Los selectores de CSS puede seleccionar un elemento en la base de la anterior o exterior de los elementos, pero no sobre la base de los siguientes o interior de los elementos.

    El efecto deseado puede ser achueved el uso de JavaScript en un lugar de manera sencilla, y puede decidir, dependiendo del propósito, si usted acaba de quitar los elementos de la pantalla o eliminarlos por completo de el árbol del documento.

    • En lugar de recurrir a JavaScript, que probablemente tenga más sentido para cambiar la estructura HTML, para que puede puede lograr con CSS…
    • Gracias por la respuesta detallada.
    • Sólo quiero señalar que hay situaciones en las que no tiene control sobre el HTML (por ejemplo, la lectura de HTML directamente desde la base de datos – ugh…) pero no tiene control sobre el JavaScript. Pero estoy de acuerdo en que sería mejor, si es posible.
  2. 22

    Es posible destino de primer hermano con CSS, con algunas limitaciones.

    Para el ejemplo de la pregunta 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 se puede establecer explícitamente los estilos de los hermanos para invalidar la configuración para el primer hijo.

  3. 3

    Hay un par de maneras de ocultar sólo el «Título 1», sólo:

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

    Alternativamente:

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

    También, <li>Child of Heading 2</li> es no un niño de <li class="parent">Heading 2</li>. Es un hermano.

    • Ninguna de estas soluciones trabajado. En el primer caso, puede ser que no quieras ocultar que el primer niño si hubo un «Texto de la Rúbrica 1». El segundo caso no funciona cuando lo probé. Parece que el CSS no apoyo lo que yo quiero hacer.
  4. 0

    El oficial CSS3 Spec actualmente no apoyo nada de esto, aunque me doy cuenta de que sería útil.

    Me gustaría tratar de hacer búsquedas para algunos predefinidos en javascript o jquery scripts/bibliotecas para la adición de los selectores de css. Aunque nunca he encontrado nada.

    Si usted venir a través de algo, por favor, publicarlo aquí.

    Si no encuentra nada, se podría hacer de forma manual, o tratar de encontrar una forma completamente diferente de la solución.

    Me gustaría tener una respuesta mejor para usted. Lo siento 🙁

  5. 0

    trate de usar js para getElementsby Classname y si hay más de 1, a continuación, utilizar css:

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

  6. 0

    Sé que esta pregunta ya tiene una validez de respuestas marcadas, pero tal vez otras personas quieren usar mi css-la única solución:

    Yo quería tener una lista de alertas (en este caso bootstrap alertas) en un contenedor y su borde de colapsar. Cada alerta tiene un border-radius, el cual se parece bastante tonta cuando todos están en un contenedor. Así que con margin-top: -1px he hecho de sus fronteras colapso. Como paso siguiente, he tenido que modificar los estilos de la primera, cada alerta en el medio y la última alerta. Y esto también debe ser bonita 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í es un angular de la plantilla para varias alertas.

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

Dejar respuesta

Please enter your comment!
Please enter your name here