In CSS, is it possible to target class property identified by index number?
css, css-selectors, dom, html, javascript
Solution
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 (e.g. `p`).
Problem
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.