Why does not work :last-child ?

 .group-list .user-name { border-bottom: 1px solid #e2e2e2; } .group-list .user-name:last-child { border-bottom: none; }

Full code

 .found-item { background: #fff; margin: 5px; padding: 5px 0; border-bottom: 1px solid #b6b6ba; } .found-item a { border-bottom: none; } .found-item a:hover { border-bottom: 1px solid #e8440d; } .found-item .user-name { padding: 5px 20px; } .found-item .user-name:hover { background: #e6e5e9; } .found-item .user-group { padding: 0 20px; } .found-item .icon-group { background-position: -13px -1215px; width: 14px; height: 14px; display: inline-block; } .group-title { text-transform: uppercase; font-weight: 600; font-size: 12px; padding-left: 25px; margin-top: 25px; } .group-list .user-name { border-bottom: 1px solid #e2e2e2; } .group-list .user-name:last-child { border-bottom: none; } 
 <div class="group-list found-item"> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»ΠΎΠ² АлСксСй</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Π³Ρ€ΡƒΠΏΠΏΡ‹</div> </div> </a> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»ΠΈΡ‰Π΅Π² Π’Π°Π΄ΠΈΠΌ</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€</div> </div> </a> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»Π°Π²ΠΈΠ½Π° ЕвгСния</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€</div> </div> </a> </div>

Each element except the last one needs a border-bottom . When adding last-child border is for some reason removed from all elements.

UPD

In this case, link styles do not affect the display. They set their own text-decoration: none; style text-decoration: none;

UPD 1.0

All divs with the class .user-name given the style - border-bottom: 1px solid #e2e2e2; .

The essence of the question - the last diva with the class .user-name remove the border-bottom

PS: All the divs with the class .user-name are inside the diva with the class .group-list .

UPD 1.1

When I add the border-bottom style, I use only divas with the .user-name class .user-name what's inside them doesn't matter (we don’t .user-name to them).

  • 1) Remove the username dash from the username class. 2) .grouplist a .username { ... } style 3) Why set the border, and then remove it? - Mr. Black
  • This is because of the link (the href attribute in the <a> tag) text is underlined, and not because of the border-bottom - Mr. Black
  • in this project, the links have no underscore, they are given a specific style border-bottom and in this part, links have no underscore at all. - Marina Voronova
  • How exactly the class name can influence the work of last-child ? - Marina Voronova
  • Underlines are not set via the border , but through text-decoration: none; or if underlines are needed text-decoration: underline; - Mr. Black

2 answers 2

Since the element with the user-name class is one in the container, it fits any selector ( first- / last-child ), so you should choose those elements in the container a lot, in this case it is a - that is, you need to remove the border to that element with the username class that lies in the last element of a

The selector will look

 .group-list a:last-child .user-name:last-child { border-bottom: none; }

Example:

 .found-item { background: #fff; margin: 5px; padding: 5px 0; border-bottom: 1px solid #b6b6ba; } .found-item a { border-bottom: none; } .found-item a:hover { border-bottom: 1px solid #e8440d; } .found-item .user-name { padding: 5px 20px; } .found-item .user-name:hover { background: #e6e5e9; } .found-item .user-group { padding: 0 20px; } .found-item .icon-group { background-position: -13px -1215px; width: 14px; height: 14px; display: inline-block; } .group-title { text-transform: uppercase; font-weight: 600; font-size: 12px; padding-left: 25px; margin-top: 25px; } .group-list .user-name { border-bottom: 1px solid #e2e2e2; } .group-list a:last-child .user-name:last-child { border-bottom: none; } 
 <div class="group-list found-item"> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»ΠΎΠ² АлСксСй</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Π³Ρ€ΡƒΠΏΠΏΡ‹</div> </div> </a> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»ΠΈΡ‰Π΅Π² Π’Π°Π΄ΠΈΠΌ</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€</div> </div> </a> <a href=""> <div class="user-name"> <b>Π’Π΅ΠΏΠ»Π°Π²ΠΈΠ½Π° ЕвгСния</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€</div> </div> </a> </div>

  • The author did not let me understand that the border plays the role of a separator between <a> , and you realized :) - Mr. Black

last-child in the <Π°> tag is <div class='username'> , also first-child

To remove underlining from links a { text-decoration: none; } a { text-decoration: none; }

 .username b, .username span, .username div { border-bottom: 3px solid #FF0000; } .username :last-child { border-bottom: none; } 
 <div class='grouplist found-item'> <a href=''> <div class='username'> <b>Π’Π΅ΠΏΠ»ΠΎΠ² АлСксСй</b> <span class='pullright'><span class='icons icon-phone'></span> 25-354</span> <div>Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Π³Ρ€ΡƒΠΏΠΏΡ‹</div> </div> </a> </div>