Select first and last link

Question

Hello. There is a block with links. The number of links in the block can be different. I want to highlight the first and last link, or rather change the border-radius. If the number of links would be fixed, I would do it like this:

.menu_left { display: inline-block; float: left; margin-top: 15px; border-radius: 10px; } .menu_left a { display: block; width: 210px; background-color: #EEEEEE; padding: 6px; } .menu_left a:nth-child(1) { border-radius: 10px 0 0 0; } .menu_left a:nth-child(4) { border-radius: 0 0 0 10px; }

  <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div>

How to be in my case?

Answer 1 · 2016-08-09T12:07:50

For this there are special pseudo-classes :first-child and :last-child .

 .menu_left { display: inline-block; float: left; margin-top: 15px; border-radius: 10px; } .menu_left a { display: block; width: 210px; background-color: #EEEEEE; padding: 6px; } .menu_left a:first-child { border-radius: 10px 0 0 0; } .menu_left a:last-child { border-radius: 0 0 0 10px; }

 <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div>

Ivan Pshenitsyn Ivan Pshenitsyn 4,400 7 thirty · Answer 2 · 2016-08-09T12:08:35

Use pseudo-classes

first-child

last-child

 a:first-child { border-radius: 10px 0 0 0; } a:last-child { border-radius: 0 0 0 10px; }

soledar10 soledar10 22.4k five 21 51 · Answer 3 · 2016-08-09T12:11:15

Still have that option

first-of-type

last-of-type

Differences between: nth-child and: nth-of-type

 .menu_left { display: inline-block; float: left; margin-top: 15px; border-radius: 10px; } .menu_left a { display: block; width: 210px; background-color: #EEEEEE; padding: 6px; } .menu_left a:first-of-type { border-radius: 10px 0 0 0; } .menu_left a:last-of-type { border-radius: 0 0 0 10px; }

 <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div>

Answer 4 · 2016-08-09T12:11:39

: first-child and : last-child - these pseudo-classes are responsible for referring to the first and last element of the parent.

 .menu_left { display: inline-block; float: left; margin-top: 15px; border-radius: 10px; } .menu_left a { display: block; width: 210px; background-color: #EEEEEE; padding: 6px; } .menu_left a:first-child { border-radius: 10px 0 0 0; } .menu_left a:last-child { border-radius: 0 0 0 10px; }

 <div class="menu_left"> <a href="/">Алюминиевые радиаторы</a> <a href="/">Биметаллические радиаторы</a> <a href="/">Комплектующие к радиаторам</a> <a href="/">Рекомендации по выбору радиатора</a> </div>

Select first and last link

4 answers 4

More articles: