1

I want to select the next anchor element to the "active" class, in following example I want to select element <a href="/home?page=2"> 2 </a> is it possible by class .active?

<ul class="pagination">
 <li><a href="/home?page=1" class="active"> 1 </a></li>
 <li><a href="/home?page=2"> 2 </a></li>
 <li><a href="/home?page=3"> 3 </a></li>               
</ul>
Note : Please note that "active" class is given to the anchor element
user9050678
  • 323
  • 1
  • 3
  • 13

1 Answers1

-3

By using adjacent sibling selector, you can access the next element after a specific element. So in your example, it'd be

    .active + li a {
     color: red;
     }

And most importantly, move the .active class out into the <li> tag like this:

<ul class="pagination">
 <li  class="active"><a href="/home?page=1"> 1 </a></li>
 <li><a href="/home?page=2"> 2 </a></li>
 <li><a href="/home?page=3"> 3 </a></li>               
</ul>
Harry Adel
  • 1,238
  • 11
  • 16
  • read the question carefully and check the HTML – Temani Afif Mar 10 '18 at 09:23
  • What am I missing? He wanted to access the next element after the one with .active, didn't he? – Harry Adel Mar 10 '18 at 09:26
  • simply read the question again and check his HTML ... and if not convinced, test your code – Temani Afif Mar 10 '18 at 09:27
  • I don't want this to be going back and forth, but I wouldn't be replying back to if I hadn't reread the question and checked the HTML. Can you please directly tell me what am I missing? – Harry Adel Mar 10 '18 at 09:29
  • You are missing nothing .. you are simply wrong ... and i cannot be more direct than the question itself, am not going to write the question again in comment. The question is clearly written and explicit .. so check the HTML strcuture, test your code, as simple as that .... if you still don't see the issue, then read about CSS – Temani Afif Mar 10 '18 at 09:33
  • Oh I see, .active should've been moved out into the
  • element. My bad, should've tested my answer before submitting it. I apologize.
    • – Harry Adel Mar 10 '18 at 09:42
  • you're still very far... – Hitmands Mar 10 '18 at 09:46
  • Jesus christ, you guys are grilling me over here :D. Well, it's not that I've gave up, but I checked the code snippet in my answer and it's working. so..? – Harry Adel Mar 10 '18 at 09:49
  • I see, the guy didn't ask for the .active class to be moved out in the first place. – Harry Adel Mar 10 '18 at 10:04