How do you make a sss animation for the menu list when you're hired?

[rielyn]

Hello. There's a code like this:

<ul className="vertical medium-horizontal menu">
    <li>
        <a className="dropdown button" href="#">1</a>
        <a  href="#">1</a>
    </li>
</ul>

Animal effect on stylus

li a:first-child
  background-color #ff8731
  background-size 100% 200%
  background-image linear-gradient(to bottom, #ff8731 50%, #fff 50%)
  transition background-position 0.3s
li a:last-child

background-color #fff

background-size 100% 200%

background-image linear-gradient(to bottom, #fff 50%, #ff8731 50%)

border-top 1px solid #fff

border-top-left-radius 0

border-top-right-radius 0

color #0073AE

display none

margin-top -10px

transition background-position 0.3s
li a:last-child:hover

background-position 0 -100%

color #fff

Question: How do you make it when you do it? a:last-child Ooh. a:first-child It's the same animation as it was. a:last-child?

[emran]

No. CSS may influence the styles of the components and elements that have been inserted after the proponent element by the operator

.style1 + .style2 {
  background: red;
}
<div class='style1'></div>

<div class='style2'></div> //будет красный
<div class='style1'></div>

<div></div>

<div class='style2'></div> //не будет красный

There's an example of how you can get, Almost. What you need is:
(Initiation on first element)
http://plnkr.co/edit/ewIBeWXiQnPbuqyOACvu?p=preview

---

As an option, you can add the style to the first and last element when you're hired, but I think you've already thought about it. ♪