CSS - style element after given element

Question

How to style element after element? For example i have this:

<ul>
  <li>A</li>
  <li class="hiden">B</li>
  <li>C</li>
  <li>D</li>
  <li class="hiden">E</li>
  <li class="hiden">E</li>
  <li class="hiden">E</li>
  <li>F</li>
</ul>

I want every first li after li.hiden to have border-top.

li + li.hiden works only on first element in ul.

dfsq · Accepted Answer · 2015-10-29 09:12:33Z

4

To target first li after li.hiden you should use li.hiden + li selector:

li.hiden + li {
    border-top: 1px red solid;
}

<ul>
  <li>A</li>
  <li class="hiden">B</li>
  <li>C</li>
  <li>D</li>
  <li class="hiden">E</li>
  <li>F</li>
</ul>

answered Oct 29, 2015 at 9:12

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skodsgn Over a year ago

li.hiden + li:not(.hiden) is what i wanted, thanks for help :)

ItzMe_Ezhil · Accepted Answer · 2015-10-29 09:16:09Z

0

This will help you..

https://jsfiddle.net/0c5eu92w/

    li.hiden + li{border-top:1px solid #ccc;}

answered Oct 29, 2015 at 9:16

ItzMe_Ezhil

1,4562 gold badges12 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:32:36Z

0

What about CSS3 selector? Try this:

:nth-child(2n)

You'll find more information here.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Oct 29, 2015 at 9:20

Thomas

6776 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS - style element after given element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related