CODEWITHSUNDEEP
javascripthtmlcss
Skodsgn
Skodsgn

Reputation: 981

CSS - style element after given element

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.

enter image description here

Upvotes: 2

Views: 84

Answers (3)

Thomas
Thomas

Reputation: 677

What about CSS3 selector? Try this:

:nth-child(2n)

You'll find more information here.

Upvotes: 0

ItzMe_Ezhil
ItzMe_Ezhil

Reputation: 1406

This will help you..

https://jsfiddle.net/0c5eu92w/

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

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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>

Upvotes: 4

Related Questions