How to apply css on anchor tag of nth list item?

Question

<ol>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#"> Hyper Text 1</a></li>
  <li><a href="#"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

I want to apply css on second anchor tag(Hyper Text 2) only. I wanna do it with css only if possible. I searched a lot but couldn't figured out how to do this.

Update: I don't know how many more li will be added in list in future. I don't wanna ended up by change nth-item(no.) again and again. That's why putting nth-child only on li won't help. But I am certin that li with anchor tag will only be 2.

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child — Scoots, Apr 23 '18 at 11:03
See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Nenad Vracar, Apr 23 '18 at 11:12
@Rishabh Ah. There is no way with pure CSS then. CSS cannot go back up the DOM. You either need to alter the code generating this HTML to add a class to that second `li`, or use JavaScript (See @VXp's answer below) — Scoots, Apr 23 '18 at 11:16
Is there any chance the second `` tag *(the one you want to target)* will always have some specific `href` value you can always count on? — Smuuf, Apr 23 '18 at 11:41
@smuuf There is 4 pages in which this css will apply and all pages will have their own url. Means same url on one page and different but same(for second page) url on second page. SO if its possible with url then I have to put 4 css properties for 4 url which is not an issue for me. I will do it. Please share your solution :) — Rishabh, Apr 23 '18 at 12:22

score 2 · Accepted Answer · answered Apr 23 '18 at 14:10

Please note: This answer presents a possible solution to the OP's specific problem which was clarified in a comment and does not necessarily address the problem in title of the question "How to apply css on anchor tag of nth list item?".

If you ...

have control over URLs where these links point to, and
don't expect those URL to change suddenly (unless you change the CSS, too),

... then you might want to use CSS attribute selectors.

Having this HTML specifying the menu:

<ol class="some-menu">
  <li>Text</li>
  <li>Text</li>
  <li><a href="http://url_abc#"> Hyper Text 1</a></li>
  <li><a href="http://url_def#"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

... you can select the specific element with CSS based on that element's attribute value:

ol.some-menu li a[href*="url_def"] {
  outline: 5px solid red;
}

This selector selects all <a> elements that have a href value containing url_def - that are also inside <li>s, which are inside <ul class="some-menu"> elements.

Working example: https://codepen.io/anon/pen/jxWmxR.

Attribute selectors do have a few modi operandi available and are well described here: MDN web docs.

This worked perfectly... Thanks for sharing it. This solved the issue. Great trick of css :) — Rishabh, Apr 24 '18 at 04:05

score 1 · Answer 2 · answered Apr 23 '18 at 11:11

1

You can do it with a little bit of jQuery:

$('li:has(a) a').last().css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#">Hyper Text 1</a></li>
  <li><a href="#">Hyper Text 2</a></li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

answered Apr 23 '18 at 11:11

VXp

10,307
6
25
40

Your solution is good but problem is I am using premium theme and I can't add Jquery without making child theme. And I don't wanna make child theme for just this little issue. – Rishabh Apr 23 '18 at 11:17
I'm pretty sure there are Wordpress plugins that allow you to insert JS/jQuery stuff into your templates without directly modifying the theme. – Smuuf Apr 23 '18 at 11:48
1

@vxp I can add JS either by installing a plugin or by making child theme of my current theme. Installing a plugin just for one or two lines of JS is something I will consider as my very last option. And creating child theme just of this little issue is something I won't even bother to try coz child theme shud not be made for this little thing. – Rishabh Apr 23 '18 at 12:27

score 0 · Answer 3 · answered Apr 23 '18 at 11:20

0

It is not possible with css only...one thing you can do is Simply add class to that 2nd anchor tag..and here you go..

.Changecolor{
color:green;
}

<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li><a href="#"> Hyper Text 1</a></li>
  <li><a href="#" class="Changecolor"> Hyper Text 2</a></li>
  <li>Text</li>
</ol>

answered Apr 23 '18 at 11:20

Khushbu Vaghela

735
2
5
16

I can't add class coz it's wordpress site. I am gonna setup data one time only. Later client will add more data in future(Updates). And if he needs to create more OL tags then he won't be able to add class coz of lack of knowledge of html. That's why I didn't put class. – Rishabh Apr 23 '18 at 11:25

How to apply css on anchor tag of nth list item?

3 Answers3