0

I was trying use the ":nth-child()" in the css to not having to make a new class everytime I want to put an icon. But when I tried the code was repeating the first icon. What do I did wrong?

@font-face {
  font-family: 'icon';
  src: url(assets/font/icon.ttf);
}

body {
  background-color: #1D232A;
  font-family: 'Open Sans', 'icon', sans-serif;
  color: #FFFFFF;
}

.header-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #15191C;
  padding: 8px 16px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}

.header-mobile__button i::before {
  display: block;
  content: "\e904";
}

.header-mobile__button i:nth-child(2)::before {
  content: "\e906";
}

.header-mobile__img {
  width: 40px;
}
<body>
  <header class="header-mobile">
    <button class="header-mobile__button"><i></i></button>
    <img src="assets/img/logo.svg" alt="Logo H2C" class="header-mobile__img">
    <button class="header-mobile__button"><i></i></button>
  </header>
</body>
Arman Ebrahimi
  • 2,035
  • 2
  • 7
  • 20
Pitore
  • 3
  • 1
  • Take a look at https://stackoverflow.com/questions/41867097/why-is-nth-child-selector-not-working – asdf31 Apr 20 '22 at 21:19
  • Dont you mean .header-mobile__button:nth-child(2) i::before{ content: "\e906"; } ? – Rmaxx Apr 20 '22 at 22:26

1 Answers1

1

i:nth-child(2) doesn't match anything because the only <i> elements you have are the first (not the second) child of their respective buttons.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I removed the "i" on the class and made some changes. I had to use nth-child(3) because there is an img between the two buttons. Now it's working and that was the results. ´´´ .header-mobile__button:nth-child(1)::before{ font-size: 24px; content: "\e904"; } .header-mobile__button:nth-child(3):before{ font-size: 24px; content: "\e906"; } ´´´ – Pitore Apr 20 '22 at 22:33