There is such a problem: there is navigation, menu items and links in them, I want to select the first link for styling, tried first-child and nth-child(1) - nothing works.
Tell me how this can be done, I want to use border-radius for the first link.

My code is:

 .menu__link { display: block; padding: 10px 40px; color: #fff; text-transform: uppercase; letter-spacing: 2px; text-shadow: 4px 4px 5px black; transition: background .25s; background: rgba(255, 255, 255, .4); } .menu__link:hover{ background: rgba(0, 0, 0, .4); } .menu__link:nth-child(1){ border-radius: 10px 0 0 10px; } .menu__link:nth-child(6){ border-radius: 0 10px 10px 0; } 
 <nav class="nav"> <menu class="menu"> <li class="menu__item"><a href="#" class="menu__link">Секция 1</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 2</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 3</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 4</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 5</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 6</a></li> </menu> </nav>

  • one
    Show css how you tried ... - Air

2 answers 2

In this form, everything works. To see the result of border-radius, you need to set the border.

 .menu__item:first-child .menu__link { border: 1px solid black; border-radius: 5px; } 
 <nav class="nav"> <menu class="menu"> <li class="menu__item"><a href="#" class="menu__link">Секция 1</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 2</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 3</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 4</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 5</a></li> <li class="menu__item"><a href="#" class="menu__link">Секция 6</a></li> </menu> </nav>

    :first-child must be used for the li list item, not for a

     .menu > .menu__item:first-child > .menu__link { border-radius: 5px; }