Hello. There is approximately this markup:

<ul id="root"> <li><span class='amazing'><a href="#">Link1</a></span></li> <li><h1><a href="#">Link2</a><h1></li> <li> <a href="#">Link3</a> <ul> <li><a href="#">Link31</a></li> <li><h3><a href="#">Link32</a></h3></li> <li><a href="#">Link33</a></li> </ul> </li> </ul>

How to create a selector that allows you to find only those <a></a> tags that are in ul # root and are not in nested <ul> s (that is, highlight Link1, Link2 and Link3, and Link31, Link32 and Link33 " miss")?

  • one
    I understand that there is only the option "set for everyone and cancel with unnecessary" ul # root li a {// define the necessary} ul # root ul a {// reset the rules for extra links} I personally would solve the problem by putting the classes to the right links to server - etki

3 answers 3

This option is suitable if the link in <li> is present in a single instance:

 $('#root > li').find('a:first').css('color','red');
  • With jquery it works. And in css only classes? - alvoro
  • one
    @alvoro, if you really pervert, then to the full)) [Look here] [1] #root> li> *: not (ul) a, #root> li> a {color: # f00; } PS By the way, I was confused by the previous answers and I thought it was necessary for the jQuery selector to pick it up. [1]: jsfiddle.net/Deonis/LdXrG/1 - Deonis
  • Now, in general, a fairy tale. Thank. - alvoro
 $("ul#root > li a")
  • Early was delighted. It still highlights those <a> that are not needed. ul # root> li a {background: red; } - alvoro
  • In CSS, this selector is suitable for all links in this example. - Im ieee
  • Well, yes, right. And I need that <a> that are in <ul id!=root> not stand out. - alvoro
  • then such an ul # root> li> a, ul # root> li h1 a, ul # root> li span a - ffeynmann
  • the same as suggested by Dmitry Klimenko (his answer is lower). > Here the whole trick is that I do not know how deep and what the link will be "buried". - alvoro
 /*Link1*/#root>li span a {} /*Link2*/#root>li h1 a {} /*Link3*/#root>li>a {}

/ or /

 /*Link1*/#root li:nth-child(1) a {} /*Link2*/#root li:nth-child(2) a {} /*Link3*/#root li:nth-child(3)>a {}
  • The whole point here is that I don’t know how far and in what the link will be buried. - alvoro