Geek Answers Handbook

In CSS, is the target class property identified by the index number possible?

I am trying to customize a class element (appearing more than once in the DOM) by index or iteration, strictly using CSS.

I know several different ways to achieve this: I could throw an element into an array and get the specific index of the specified element (Javascript). I can mark the item I'm trying to set using #ID. I could refine the target element by specifying the attribute ( .element[href="link"] ). The :first-child and :last-child pseudo :last-child are intended only for children of this (parent) element (Duh!).

Example: I have a .class that appears 5 times in my DOM and I want to affect the CSS 3rd properties of the iteration of this .class element.

I wish there was a .element:index-3. pseudo- .element:index-3. Perhaps there is something that allows you to do just that.

+8
javascript dom html css css-selectors
source share
3 answers

If I understand you correctly, you want to style the element with the contents of "I!". in this example:

 <body> <p>Not me.</p> <p class="me">Not me.</p> <div><p class="me">Not me.</p></div> <p class="me">Me!</p> <div><div><p class="me">Not me.</p></div></div> <p class="me">Not me.</p> </body>

In some cases (see below) this is possible with pseudo-classes :nth-of-type :

 .me:nth-of-type(3) {color:red;}

As ScottS noted in the comments, this is only possible if all classes have the same element type (e.g. p ).

+3
source share

I have a .class that appears 5 times in my DOM and I want to affect the CSS properties of the third iteration of this .class element.

I read this as "the target third element that uses .class for the entire DOM", for example:

 <h1 class="class">...</h1> #1 <div> <ul class="class"> #2 <li>...</li> <li class="class">...</li> #3, target this one! <li>...</li> </ul> <div class="class">...</div> #4 </div> <p class="class">...</div> #5

Any pseudo- :nth- notation :nth- is an element determined by the number of brothers and sisters that meet certain criteria ( :nth-child(an+b) has an+b-1 brothers and sisters in front of it , etc.).

The CSS specification (including the 4th level selector level ) does not provide a means to identify elements by index out of context of kinship (that is, only individual nodes can go through, not the entire DOM tree). There is a reason for performance (crossing the DOM is tough, imagine updating the async content, this is not how the rendering engines work); but something like :nth-element-ever(3) would be a very, very arbitrary criterion and would be better aimed at introducing another class, which means exactly what it does, preferably during code generation.

+2
source share

If the elements are not placed as adjacent siblings or in at least the same “area” (container element), you will not be able to detect the existence, iteration, or virtually nothing of the “related” elements.

It’s best to use either a very ugly solution based on the assumption that the elements are siblings that might look like this: li.class: first-child + li + li {color: black; } to find the third iteration,

or just use JS to calculate the probability of occurrence and insert it as a special class, for example "gimme-css-here".

0
source share

More articles:


All Articles