Cible de premier niveau <li>s et pas imbriquée <li>s

J'ai le code HTML suivant:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

Avec jQuery, comment dois-je cibler le PREMIER niveau de <li>s?

Par exemple, j'ai besoin de faire la police en gras sur le vol stationnaire à la <li>s avec les lettres A, B et C, mais PAS que la police le style appliqué à la imbriquée <li>s (avec le nom paragraphes).

Voici un premier jsfiddle DÉMO si vous souhaitez l'utiliser.

Grâce.

EDIT--

Solution:

ENFANT SÉLECTEURS, c'est la réponse.

Pas besoin de jQuery, ce qui peut être fait à l'aide de CSS.

Voici la mise à jour DÉMO

EDIT-- Voici un de plus en plus clair démo

Merci,

InformationsquelleAutor Ricardo Zea | 2011-01-28
  1. 98

    Un container <div> avec une classe, et l'utilisation de la > sélecteur. Disons que votre conteneur div de classe "maclasse":

    .myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

    Remarque: le > sélecteur ne fonctionne pas dans IE6 et ci-dessous lorsqu'il est utilisé comme un sélecteur CSS. Il fonctionne dans tous les autres navigateurs bien, y compris IE7 et IE8, et lorsqu'il est utilisé en JQuery, il fonctionne dans tous les navigateurs pris en charge par jQuery, y compris IE6.

    • Ou sans l'ajout de ce conteneur, utilisez body: $('body > ul > li').css('border', '1px solid red');
    • Oui, c'est la solution, et la solution que j'ai trouvé sur mon propre. J'ai sélectionné cette solution comme la bonne réponse car il n'a pas besoin d'utiliser le JavaScript pour accomplir cela, mais je n'avais pas pensé que cela pourrait être fait avec CSS avant de poster la question. Merci!
    • Soyez conscient que certains des attributs CSS peut inherit donc, si vous définissez la .myclass > ul > li {font-size: 2em;} alors tous vos lis peut encore être affectée à moins que vous .myclass li {font-size: 1em;} par défaut
    InformationsquelleAutor Spudley
  2. 18

    Vous pourriez faire ceci:

    $('ul > li:not(:has(ul))');

    Mais il serait préférable de donner à votre haut niveau <ul> un ID de sorte que vous pouvez cibler avec un selecteur CSS valide:

    $('#topUL > li')
    • Votre solution ne fonctionne que si un seul ul a été utilisé dans la page et non pas si vous avez plusieurs uls. Pourtant, votre solution fonctionne néanmoins pour cet exemple précis. Merci.
    • Voulez-vous dire à cause de la carte d'identité? Oui, vous avez raison, vous aurez besoin d'utiliser une classe au lieu de cibler le premier niveau <li> éléments à travers plusieurs haut niveau <ul> éléments en même temps. Ou utiliser le multiple-selector avec les différents IDs.
    InformationsquelleAutor user113716
  3. 9

    ENFANT SÉLECTEURS, c'est la réponse.

    Pas besoin de jQuery, ce qui peut être fait à l'aide de CSS. Cible le premier niveau de li éléments avec un sélecteur:

    ul > li {
    font-weight: bold;
}

    Puis d'annuler le style pour plus de li éléments:

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

    Voici la mise à jour DÉMO.

    • C'était ma première pensée, trop. Il est difficile de dire si l'OP a besoin de quelques autres (non-CSS) le comportement trop, qui n'est pas capturé dans l'exemple hypothétique.
    • semble que votre code a été appliqué à tous les éléments de FF 17
    • La solution fonctionne sur :hover. Ici, j'ai créé un plus clair Démo
    • très clair, merci man! de bon sens!
    • c'est ce qui im problème a été, très difficile de comprendre pourquoi le gras est appliquée pour le deuxième niveau, si vous venez de la première CSS ul > li { font-weight: bold;}
    • La police est en gras dans tous lis mais depuis je veux seulement le deuxième niveau lis en gras que j'ai à "unbold" en appliquant la deuxième règle ul > li li { font-weight: normal; }. Du sens?
    • je comprends que vous avez à faire! ce que je ne comprends pas, c'est CLASS.UL > li pourquoi est-ce que les cibles de tous les liespère que les efface ma confusion. lorsque vous avez spécifiquement ciblées sapin li SEULEMENT.
    • Il n'y a pas de sélecteur de classe, je suis en utilisant un sélecteur d'élément. Plus ul > li {…} cible tous les enfants <li>s dans le document, parce que nous sommes en utilisant le sélecteur d'enfant >, qui est vraiment la même chose que de faire juste li {…}, après tout, tous les lis sont d'abord les enfants de toute façon. Le truc, c'est la deuxième règle qui nie ce que la première règle n'. Mais vous le saviez déjà . Ne fait que répondre à votre question?
    • Le mien a un sélecteur de classe et ne fonctionne toujours pas. c'est à dire, je peux comprendre pourquoi ul > li sur son propre ne peut pas travailler, mais ne comprends pas pourquoi CLASS.UL > li n'est pas honoré mmm peut-être la bonne chose, je suis à la recherche est de " CLASSE >UL > li ill essayer, cela devrait fonctionner. alors il serait judicieux.
    • Si j'ai bien compris, oui, vous pouvez simplement ajouter une classe à l' <ul class="class-name"> et de la cible à partir de là que .class-name li {…}. J'ai aussi remarqué que votre syntaxe est incorrecte: au lieu de class.ul > li il devrait être ul.class > li. J'ai le sentiment que c'est ce qui est la cause de vos problèmes.

    InformationsquelleAutor Ricardo Zea
  4. 2

    Je voudrais définir une règle pour cible tous les li éléments, puis un autre pour remplacer ce que les objectifs imbriqués li éléments.

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

    Imbriquée li éléments seraient de poids normal et de haut niveau serait audacieux.

    InformationsquelleAutor detaylor
  5. 1

    Je ne pense pas que votre problème a été complètement traitée (même si il y a quelques bonnes tentatives). Votre exemple de problème porte sur l'application d'un style à un parent et empêchant l'enfant d'hériter le style, ce qui est un problème de CSS.

    Vous pouvez cibler les éléments de la liste par la connaissance de l'élément parent (comme certains l'ont noté). Puis ajouter une classe sur le vol stationnaire.

    $('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

    Et votre CSS aurait la classe pour le parent, et une négation de style pour les enfants:

    .myHover { font-weight: bold; }
.myHover li { font-weight: normal; }
    • Oui, c'est une très bonne solution. Cependant, je préfère ne pas avoir à utiliser jQuery (même si au moment de taper la question que je n'avais pas pensé que cela pourrait être fait avec CSS). Vous a donné un vote si.
    • Merci. Je ne savais pas si tu voulais faire autre chose en javascript, ou tout simplement ajouter des styles CSS. Le :hover pseudo-classe est certainement la voie à suivre pour à peu des changements de style.
    InformationsquelleAutor typeof