Choose the nth item from a group of elements that do not have the same parent node in common

Question

Choose the nth item from a group of elements that do not have the same parent node in common

Is it possible to select a specific li element within a dynamic HTML structure without knowing the exact number of ul elements or li elements in each?
From my understanding, neither :nth-child nor :nth-of-type can achieve this due to the elements needing 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>

With the structure being dynamic, is there a way to select the nth li element on the page?

For reference, JsFiddle link: click here

I am implementing LESS - are there any features in LESS that could assist with this issue?

Update:
After discovering the CSS4 pseudo-class :nth-match, it seems that it's not currently supported. This, along with the feedback received, reinforces the idea that achieving this task may not be feasible at present... :(

css css-selectors less

Answer 1

Answer №1

Due to the limitations of CSS selectors such as :nth-child, which are based on sibling elements, achieving this task within CSS itself is not feasible.
Less serves as a language that compiles into CSS without introducing any additional functionalities.
A straightforward solution would be to utilize JavaScript instead.

Answer 2

Due to the limitations of CSS selectors such as :nth-child, which are based on sibling elements, achieving this task within CSS itself is not feasible.
Less serves as a language that compiles into CSS without introducing any additional functionalities.
A straightforward solution would be to utilize JavaScript instead.

Answer 3

Answer №2

From my experience (having worked closely with a CSS expert for the past 4 years),

it seems that creating CSS rules based on the content of a tag is not possible... That being said, however, take a look at this:

link

The concept is to not add the content inside the tag, but rather as a tag attribute like this:

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

then in your CSS

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

you can then target it like so:

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

A quick search on CanIUse reveals that the "attr" CSS technique is not supported by ANY version of IE (unfortunately):

link:

Answer 4

From my experience (having worked closely with a CSS expert for the past 4 years),

it seems that creating CSS rules based on the content of a tag is not possible... That being said, however, take a look at this:

link

The concept is to not add the content inside the tag, but rather as a tag attribute like this:

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

then in your CSS

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

you can then target it like so:

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

A quick search on CanIUse reveals that the "attr" CSS technique is not supported by ANY version of IE (unfortunately):

link:

Choose the nth item from a group of elements that do not have the same parent node in common

Answer №1

Answer №2

Similar questions

The automatic redirection feature on a webpage is not functioning correctly on mobile devices

What could possibly be causing the "Unexpected token (" error to appear in this code?

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

How to design 'Sliding gallery panels' using jQuery and CSS3?

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

Tips for selectively applying CSS to a single HTML file

having difficulty implementing the blur effect in reactJS

Understanding fluid design concept

Seeking assistance in creating custom tabs for integration with a jQuery tabs plugin

Troublesome situation arising from CSS floats overlapping div elements

IE6 is not displaying the tag styles correctly

The link in the HTML code has been prevented from opening in a new

Can CSS be utilized to define the dimensions and background of a <div>?

The Super Sub menu is failing to display correctly as intended

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am struggling to make my button hover effects to function properly despite trying out numerous suggestions to fix it

The DataGrids effortlessly expanded to accommodate their parents without the need for a horizontal scrollbar, showcasing their full capacity

Using CSS to position elements absolutely while also adjusting the width of the div

Styling your div elements in CSS to shrink in width relative to their parent container

Some browsers are failing to display the navigation bar on my website