Why are styles not set through a pseudo-class?

Question

css

Hello! Help solve the problem. I can't set properties to an element via the nth-child pseudo-class. I can't understand why.
This is how it should be. The HELP element needs to be set properties so that it appears to be inactive.


Here is the code

<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;
    }
  }
}

Here is the 4th element, it is also help and properties are not set, through nth-child.

Answer 1

Used slick slider
https://codepen.io/mahmoudzohdi/pen/WrOJPv

Answer 2

Well, put the text and the picture inside the slide, and then, using css, style it the way you want.

<div class='slider'>
<div class='slide'><p>Текст1</p><img src="1.jpg"></div>
<div class='slide'><p>Текст2</p><img src="2.jpg"></div>
<div class='slide'><p>Текст3</p><img src="3.jpg"></div>
</div>

Answer 3

Just typeset this picture (which you attached) and make it a slide. Here the image goes as background-image, and the text with the button is a separate block inside the slide.

Answer 4

c owl carousel did not work, I use the bootstrap carousel, but I think the principle is similar.
Just inside the carousel block, type up what you want like
:

<div id="carousel">
img
h1
input
</div>

Here are examples where there are entire sections in the carousel:
https://sohouser.github.io/animal/#pets
https://sohouser.github.io/halcyon/ (this one has 3 carousels with different content)
https://sohouser .github.io/finance/ (and here only the background changes)