There is a css code for certain lists:

section #contacts #contacts-list ul { width: 100%; padding-left: 1%; border-left: 2px dotted #1C1C1C; } section #contacts #contacts-list ul li { float: none; margin-bottom: 5%; } section #contacts #contacts-list ul li:first-child { font-size: 20px; font-weight: 500; }

And there are several such lists on the site. The problem is that due to the margin-bottom property of the list item, at the end the border sticks out a bit. Is it possible to somehow select the last element of the last list? I tried this code:

 section #contacts #contacts-list ul:last-child li:last-child { margin-bottom: 0; }

But naturally this does not work. And I need specifically on css, without using js.

  • html code add - E_K
  • try to choose ul: last-of-type - Ilya Shishlachev
  • @ IlyaShishlachev, I tried li: last-of-type. But li still gets li inside ul. And in ul: last-of-type I see no point, I need a margin specifically for li. - Ikor Dadurii
  • But what prevents you from adding a modifier to the desired element and overriding styles? - Ilya Shishlachev

1 answer 1

li:last-child change li:last-of-type

 section #contacts #contacts-list ul:last-child li:last-of-type { margin-bottom: 0; }

so earn

  • Does not work. The browser simply ignores the style as incorrect. - Ikor Dadurii
  • try to change all last-child to last-of-type. - Mireille Ars
  • if you need the last li , then either section #contacts #contacts-list ul:last-child , or section #contacts #contacts-list ul li:last-of-type . it cannot be wrong - Mirei Arov