0

.year-seperator:last-of-type {
    display: none;
}
<ul class="blog-year">  
    <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
</ul>

Then all the separator disappear. Why? How can I get the last element of that class? Or how can I hide it?

Mario Petrovic
  • 5,868
  • 12
  • 32
  • 54
Vicheanak
  • 6,106
  • 15
  • 61
  • 96

3 Answers3

2

try this

.blog-year li:last-child .year-seperator {
    display: none;
}
<ul class="blog-year">  
    <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
    <li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
</ul>
Ganesh Putta
  • 2,878
  • 1
  • 15
  • 23
2

Because they are all at last of li. It's the last li element not last span element. It should look like this:

li:last-child .year-seperator {
    display: none;
}
Quy Truong
  • 403
  • 3
  • 9
0

Syntax

element:last-child { style_properties }

Read More Details Click

  .blog-year li .year-seperator:last-child
      {
         display:none; 
      }
    <ul class="blog-year"> 
        <li><a href="http://my.link">2016</a><span class="year-seperator">|</span></li>
     <li><a href="http://my.link">2015</a><span class="year-seperator">|</span></li>
     <li><a href="http://my.link">2014</a><span class="year-seperator">|</span></li>
     <li><a href="http://my.link">2013</a><span class="year-seperator">|</span></li>
    </ul>
 

 
Sumit patel
  • 3,427
  • 8
  • 31
  • 54