css - Select nth element for elements that do not share the same immediate parent -


how select 4th (or specific) li element in following html structure? possible? (from understanding :nth-child , :nth-of-type require elements 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 dynamic, don't know how many ul elements there nor how many li elements each of them contains. there still way select nth li element on page?

jsfiddle: click

i using less. there in less me?

update:
found :nth-match css4 pseudo class not (yet) supported: css nth-match doesn't work
, comments/answers confirm belief not possible today... :(

since :nth-child , other similar selectors make matches based on sibling elements , css has no parent-wise selectors isn't possible.
less language compiled css, doesn't add new features css.
easy alternative use javascript.


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - How to Hide Date Menu from Datepicker in yii2 -