1

How do I select the 4th (or any specific) li element in the following HTML structure? Is this even possible? (From my understanding :nth-child and :nth-of-type require the elements to be siblings.)

<div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Pear</li>
    </ul>
    <ul>
        <li>Melon</li>
        <li>Mango</li>
    </ul>
    <ul>
        <li>Strawberry</li>
    </ul>
</div>

The above structure is dynamic, so I don't know how many ul elements there are nor how many li elements each of them contains. Is there still a way to select the nth li element on the page?

JsFiddle: click

I am using LESS. Is there something in LESS that could help me?

Update:
I just found the :nth-match CSS4 pseudo class which is not (yet) supported: CSS nth-match doesn't work
This and your comments/answers confirm my belief that it is not possible today... :(

Community
  • 1
  • 1
Julian Lettner
  • 3,309
  • 7
  • 32
  • 49
  • 6
    I really doubt the possibility of achieving this. Whatever little I know of CSS says that we can only target siblings (using the `nth-` or `+` or `~` selectors) and not elements across multiple parents. Less compiler wouldn't know how many elements are available at the time of compilation and it can't do anything that CSS does not support because eventually the Less would get compiled to CSS. – Harry Jul 14 '15 at 17:14
  • You're going to need JavaScript for this. – j08691 Jul 14 '15 at 17:22
  • http://stackoverflow.com/questions/1777357/css-rule-based-on-content – eran otzap Jul 14 '15 at 17:30
  • Out of curiosity, why would you be generating separate lists with no text or titles separating them in the first place? It seems that semantically they would make the most sense as part of a single list or with some text to indicate why they are in separate lists. – Aaron Gustafson Jul 14 '15 at 18:18
  • 1
    You'll be disappointed to hear that :nth-match() has been subsumed into :nth-child() because it *also* requires that the elements be siblings - the original name was misleading in that sense. – BoltClock Jul 14 '15 at 18:47

2 Answers2

2

Since :nth-child and other similar selectors make matches based on sibling elements and CSS has no parent-wise selectors this isn't possible.
Less is simply a language that is compiled into CSS, it doesn't actually add any new features into CSS.
The easy alternative is to use Javascript.

Etheryte
  • 24,589
  • 11
  • 71
  • 116
0

AFAIK (and i've been with my css friend for around 4 years now)

you can't create css rules based on the content of a tag... with that said however.... have a look at this:

link

the basic idea is dont add the content to inside the tag, but rather as a tag attribute like so:

<li value="some_number"></li>

then in your css

li:before{
 content:attr(value);
}

then you can target it as follows:

li[value="4"]{
 background-color:red;
}

and a quick CanIUse search shows that the "attr" css technique is not support by ANY version of IE (sorry):

link:

Craig Wayne
  • 4,499
  • 4
  • 35
  • 50
  • Thanks for your answer! I wasn't clear enough: I want to select by index, not content. – Julian Lettner Jul 14 '15 at 17:38
  • "attr" isn't the right search term - none of the results listed there are even about CSS. The right place is here http://caniuse.com/#feat=css-gencontent and it says that it is supported in IE8+. – BoltClock Jul 15 '15 at 07:04