Ausblenden von ersten li in der ul mit CSS

Habe ich ein Navigations-Menü, das würde ich gerne ausblenden, das erste Element in ihm. z.B.

<ul>
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

Ich dann verstecken Sie das erste element, wie dies in CSS:

li:first-child{
   visibility: hidden;
}

Aber was dann passiert, ist, dass alle die ersten li-Elemente in der navigation disspears, wie 'Punkt 1' im Navigationsmenü. Wie würde ich wählen nur den 'home' - li item-und ausblenden?

Dank!

fügen Sie eine Klasse zu Ihrem navigator ul
In Bezug auf : stackoverflow.com/questions/977883/... , stackoverflow.com/questions/3892111/... , stackoverflow.com/questions/9084705/...

InformationsquelleAutor Tiwaz89 | 2013-03-01

  1. 18

    Geben Sie Ihre erste ul-Klasse "yourclass", dann .yourclass > li:first-child { visibility: hidden; }

    Ausblenden, das erste Kind der zweiten ul die Verwendung .yourclass > li > ul > li:first-child

    Arbeitete wie ein Charme Dank Merec

    InformationsquelleAutor Merec

  2. 2

    Zuweisen eines id zu dem ersten ul-und dann bewerben Sie den css-Stil an, dass die id nur?

    <ul id="someid">
   <li>Home</li>
   <li>About</li>
   <li>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </li>
</ul>

#someid > li:first-child{
   visibility: hidden;
}

    Siehe auch http://www.w3.org/TR/CSS2/selector.html

    Es wird das gleiche tun.
    Stimmt, denn der andere ist auch ein Kind der erste ul-element!
    Bearbeiten Sie es mit dem ">" - Selektor. Wenigstens das funktionierte auf meinem test.
    Funktioniert mit dem Bearbeiten von Adrian. Danke!

    InformationsquelleAutor Techmonk

  3. 1
    ul > li:first-child { (note you can do :last-child to target the last item)
display: none;
}

    Weitere option, vor allem, wenn Sie brauchen, to Ziel andere Kinder aus anderen Gründen ist die Verwendung von :nth-child(). Innerhalb der Klammern du eine Nummer http://www.w3schools.com/cssref/sel_nth-child.asp

    Mit nth-child zu imitieren die gleiche wie die oben genannten.

    ul > li:nth-child(1) {
display: none;
}

    Beachten Sie, dass das N-te Kind ist nicht unterstützt durch IE ohne eine jquery-Bibliothek wie modernizr, um ihm zu helfen.

    InformationsquelleAutor Michael

  4. 0

    Müssten Sie das element oder die Klasse, die oberhalb der ersten ul, geben Sie dann

    css-soluce : {parent-Selektor} > ul > li.

    jQuery soluce : $( "ul > li" );

    InformationsquelleAutor Milche Patern

  5. 0

    Ich würde erwägen:

    body> ul>:first-child {
    display: none;
}

    Statt:

    ul li:first-child{
    visibility: hidden;
}
    Irgendeinem Grund Sie verwenden würden, diese eher?
    Sehr selten ist meine navigation ein direkter Nachkomme des Körpers, warum macht das mehr Sinn???

    InformationsquelleAutor vitaminRAD

  6. 0
    <ul id="abc">
  <li>Home</li>
  <li>About</li>
  <li>
  <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
  </ul>
</li>
</ul>
  #abc > li:first-child{
   display: none;
   }
    Dies wird zu verbergen, sowohl als auch
    nehmen Sie nur die 'ul' nach #abc. Das sollte funktionieren.
    Die CSS-Regel wird nicht funktionieren. Du bist immer noch auf alle die ersten Kinder, die <li> unabhängig von der Schachtelungsebene.

    InformationsquelleAutor PSR

Schreibe einen Kommentar