La sélection de tous les enfants directs d'un <ul> élément

Dire que j'ai:

<ul class="menu">
 <li>One</li>
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
 <li>Two</li>
  <ul class="submenu">
   <li>Pear</li>
   <li>Banana</li>
  </ul>
</ul>

Est-il un moyen pour ne sélectionner que les premiers enfants de haut niveau <ul> élément (dans ce cas "Un" et "Deux") avec CSS?

OriginalL'auteur Soliah | 2009-10-21

  1. 8

    Utiliser le sélecteur d'enfant >:

    ul > li { font-weight: bold; }

    Le seul problème est que cela ne fonctionne pas avec IE6. Consultez cette liste de Les sélecteurs CSS et prise en charge du navigateur.

    Si vous avez besoin de soutien que le navigateur que vous aurez à faire quelque chose comme ça.

    ul li { font-weight: bold; }
ul li li { font-weight: normal; }

    Ce sera relativement simple dans certaines situations et complètement impraticable dans d'autres. Si vous vous trouvez dans une situation difficile, vous pouvez avoir besoin d'interposer de certaines classes pour la rendre plus facile.

    Ne sera pas présent également sélectionner les fruits? J'aimerais qu'il suffit de sélectionner "Un" et "Deux". Peut-être que j'aurais du préciser certaines classes, si je veux être précis.
    cletus la réponse est juste en fonction de la question posée. Comme toujours, de Tester et de voir par vous-même si elle répond à vos besoins.

    OriginalL'auteur cletus

  2. 2
    ul > li

    Mais il ne fonctionne pas dans IE6. Voici une belle liste de sélecteur de soutien dans les versions IE:
    http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

    La façon la plus simple explicitement l'objectif est de leur donner une classe à part de nom.

    OriginalL'auteur Victor Stanciu

  3. 0

    Bien, si vous n'êtes pas inquiet au sujet de l'utilisation de jQuery, vous pouvez obtenir plus de IE6 problème de compatibilité en utilisant jQuery css.

    OriginalL'auteur Tarik

  4. 0

    Votre balisage du mal. Il doit être:

    <ul class="menu">
 <li>One
  <ul class="submenu">
   <li>Apple</li>
   <li>Orange</li>
  </ul>
</li>

    Listes imbriquées apparaître à l'intérieur du précédent élément li

    OriginalL'auteur Cath G