In CSS, is it possible to target class property identified by index number?
Question
I'm trying to target a class element (appearing more than once in the DOM) by its index or iteration, strictly using CSS.
I know of several different ways of achieving this: I could toss the element(s) in an array and retrieve a specific index of said element (Javascript). I could label the element I'm trying to target with an #ID. I could refine the targeted element by specifying an attribute ( .element[href="link"] ). The pseudo-class :first-child and :last-child only target the children of that (parent) element (Duh!).
Example: I have a .class appearing 5 times within my DOM and I want to affect the CSS properties of the 3rd iteration of that .class element.
I wish there was a pseudo-class of .element:index-3. There's probably something out there that let's you do just that.
3 answers
solution1
3 2012-10-28 00:03:24
If I understand you correctly, you want to style the element with the content "Me!" 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>
This should be possible In some cases (see below) it is possible with the pseudo-class :nth-of-type :
.me:nth-of-type(3) {color:red;}
As ScottS noted in the comments, this is only possible if all classes are on the same element type (eg p ).
solution2
2 2012-10-28 02:09:34
I have a .class appearing 5 times within my DOM and I want to affect the CSS properties of the 3rd iteration of that .class element.
I'm reading this as "target third element that uses .class across the entire DOM", eg:
<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 :nth- pseudo-class notation represents an element qualified by the number of siblings matching a certain criteria ( :nth-child(an+b) has an+b-1 siblings before it etc.).
CSS specification (including selectors level 4 draft ) does not provide means of qualifying elements by index outside of sibling context (ie only individual nodes can be traversed, not the entire DOM tree). There is a performance reason behind this (traversing DOM is tough, imagine async content update, this is not how rendering engines work); but also something like :nth-element-ever(3) would be a very, very arbitrary criteria and would be better targeted by introduction of another class that means exactly what it does, preferably during code generation.
solution3
0 2012-10-28 00:50:22
If the elements are not placed as adjacent siblings, or at least in the same "scope" (container element), there's no way for you to find out existence, iteration, or actually nothing about "related" elements.
Your best shot is either use a very ugly solution, based on the assumption the elements are siblings, which might look like so: li.class:first-child + li + li { color: black; } to find the 3rd iteration,
or just use some JS to calculate occurance of an instace and insert it as a special class, like "gimme-css-here".
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.