Target List Items with id and nth-child?

[pixeldroid]

I’m setting up a citation/reference system for publications.
Is it possible assign an id to an <ol> and use nth-child to target the list items?
I have tried these:

<a href="#reference li:nth-child(1)"><sup>1</sup></a>
<a href="#ol#reference li:nth-child(1)"><sup>1</sup></a>
<a href="#reference:nth-child(1)"><sup>1</sup></a>
<a href="#reference :nth-child(1)"><sup>1</sup></a>

<ol id="reference">
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
</ol>

Thanks.

[PaulOB]

@pixeldroid

Is it possible assign an id to an <ol> and use nth-child to target the list items?

It’s possible in CSS to target the list items for styling but not as values of an href attribute like you have above.

You would need the href fragment identifier to point directly to the list item you want to navigate to.

e.g.

<nav>
  <a href="#ref1"><sup>1</sup></a>
  <a href="#ref2"><sup>2</sup></a>
  <a href="#ref3"><sup>3</sup></a>
  <a href="#ref4"><sup>4</sup></a>
</nav>

<ol id="reference">
  <li id="ref1">One</li>
  <li id="ref2">Two</li>
  <li id="ref3">Three</li>
  <li id="ref4">Four</li>
</ol>

The CSS can only be used as CSS

I did a jQuery footnote example a while ago which automated the process a little.

[pixeldroid]

Thanks so much!
The publications are currently structured using fragment identifiers as you have described. I was looking for a way to put all of the linking into the citations.

[PaulOB]

@pixeldroid

I was looking for a way to put all of the linking into the citations.

That’s not possible as the target has to be identified by a unique ID. CSS can of course style elements based on their nth position but html can’t.

(The script in my pen automates the process a little and cycles through all the citations and appends the correct id to the destination.)