20/28 nth-child

Курсы §13. Мастерская: создаём меню
1

nth-child(1) подхватывает все теги <a></a> и делает всем ссылкам красный фон, а не лишь первой.
В чем может быть причина?

}
.main-menu {margin: 0;padding: 0;}
.main-menu li{
    list-style-type:none;
    display:inline-block;}
.main-menu li a{
    display: block;
    width:100%;
    color: #ffffff;
    background: #2980b9;
    padding:10px 14px 10px 15px;
    border-left:2px solid #2c3e50;
    margin-right:-4px;
    text-decoration:none;
}
.active a
{
   background:#1abc9c;
}
.main-menu a:nth-child(1)
{
    background:red;
}
2

Понимаете в чем дело… У ваших ссылок не один родитель. Каждая из них находится в своем элементе списка li.
То есть чтобы получилось так, как вы хотите, надо писать так:
.main-menu li:nth-child(1) a {
background-color:red;
}

1 лайк