Почему не задаются стили, через псевдокласс?

Question

[SiQo]

Здравствуйте! Помогите решить проблему. Не могу задать свойства элементу через псевдокласс nth-child. Не могу понять, почему так.
Вот как должно быть. Элементу HELP, нужно задать свойства, чтобы он был как будто бы, неактивный.


Вот код

<div class="header__row">
			<nav class="header__menu">
				<div class="menu__nav">
					<ul class="menu__list">
						<li><a href="" class="menu__link">Tour</a></li>
						<li><a href="" class="menu__link">Features</a></li>
						<li><a href="" class="menu__link">Pricing</a></li>
						<li><a href="" class="menu__link">Help</a></li>
						<li><a href="" class="menu__link">Contacts</a></li>
						<li><a href="" class="menu__link"><span>Get App</span></a></li>
					</ul>
				</div>
			</nav>
			<div class="header__logo">
				<img src="../img/logo/logo.png" alt="">
			</div>
		</div>

CSS

.menu {
	&__nav {}
	&__list {
		display: flex;
		li{
			padding: 0px 41px;
			&:nth-child(3){
				padding: 0px 303px 0px 41px;
			}
			&:nth-child(4){
				padding: 0px 41px 0px 303px;
			}
		}
	}
	&__link {
		font-family: 'Lato', sans-serif;
		font-size: 16px;
		line-height: 1.2;
		font-weight: 400;
		color: #26272d;
		&:nth-child(4) {
			opacity: 0.4;
			font-family: 'Lato', sans-serif;
			line-height: 1.2;
			color: #1b1c1e;
		}
	}
}

Вот 4-му элементу, он же help и не задаются свойства, через nth-child.

Comments

[ThunderCat]

Оформите в песочницу.

[Steppp]

Попробуй ссылки выбирать в общем родительском блоке

.menu {
  &__nav {}
  &__list {
    display: flex;
    li{
      padding: 0px 41px;
      &:nth-child(3){
        padding: 0px 303px 0px 41px;
      }
      &:nth-child(4){
        padding: 0px 41px 0px 303px;
      }
    }
    a {
      font-family: 'Lato', sans-serif;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 400;
      color: #26272d;
      &:nth-child(4) {
        opacity: 0.4;
        font-family: 'Lato', sans-serif;
        line-height: 1.2;
        color: #1b1c1e;
     }
  }
  }
  
}

[Steppp]

Хотя нет, Надо общий родитель
ul в нем li:nth-child(4) и а нем уже a

ul {
  li {
    a {
      font-family: 'Lato', sans-serif;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 400;
      color: #26272d;
       }
   &:nth-child(4) {
       a{
        opacity: 0.4;
        line-height: 1.2;
        color: #1b1c1e;
       }
    }
  }
}

[Ankhena]

Вот 4-му элементу, он же help и не задаются свойства, через nth-child.

Как вы это выяснили?

Это ваш код, залитый в песочницу https://jsfiddle.net/5asLhj68/ и видно, что всё прекрасненько работает. Для li.
А для ссылки не будет, потому что она не 4ая в своем родителе, а первая.

[Froggyweb]

Я сегодня шаман не работает
это,

a {
      font-family: 'Lato', sans-serif;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 400;
      color: #26272d;
      &:nth-child(4) {
        opacity: 0.4;
        font-family: 'Lato', sans-serif;
        line-height: 1.2;
        color: #1b1c1e;
     }

т.к. у ссылки нет дочерних элементов. :)
посмотри как работает амперсанд у препрцессоров

[Ankhena]

Froggyweb, ваша запись даст a:nth-child(4), т.е. будет искать 4 дочерний в родителе ссылки и проверять ссылка ли он. А не среди внутренностей ссылки.

[Froggyweb]

Ankhena, это не моя запись :(
у &__link нет &:nth-child(4)
топикастера это расстроило

[Ankhena]

Froggyweb,

a {
&:nth-child(4) {
   }
}

т.к. у ссылки нет дочерних элементов. :)

вы написали про дочерние элементы ссылки, но nth-child ищет не дочерние элементы указанного селектора, а дочерние элементы родителя селектора.

[Froggyweb]

Ankhena, родительский селектор здесь ссылка

[Froggyweb]

Ankhena, Объясните для тупых как может сработать этот селектор?

[Ankhena]

Froggyweb, этот никак.
Но не потому что

т.к. у ссылки нет дочерних элементов. :)

а потому, что у li только один дочерний элемент.

[SiQo]

Ankhena, Не понял немного. Я же обращаюсь к menu__link. То есть к 4-му menu__link. Почему он не хочет это понимать? Когда я задавал паддинги li, он работал ведь. Мне это правда, тяжело понять.

[Ankhena]

SiQo,

Я же обращаюсь к menu__link. То есть к 4-му menu__link.

Да, но внутри родителя ссылки, т. е. внутри li нет четырех элементов. Есть только одна ссылка.

Вам нужна не четвертая ссылка внутри li. А ссылка, лежащая внутри четвертого li.

Вот так: li:nth-child(4) .menu__link {стили}

[SiQo]

Ankhena, Возможно, я понял. Спасибо огромное! Сейчас попробую.