CSS nth-child(1) is not showing up with full page sections-CodePudding

I have 4 <section></section> tags in my HTML, and in my CSS, and I have these color variables:

:root {
  --home-page-color: red;
  --about-page-color: orange;
  --projects-page-color: yellow;
  --contact-page-color: green;
}

I also have the this section CSS:

section {
  height: 100vh;
}

section:nth-child(1) {
  background-color: var(--home-page-color);
}

section:nth-child(2) {
  background-color: var(--about-page-color);
}

section:nth-child(3) {
  background-color: var(--projects-page-color);
}

section:nth-child(4) {
  background-color: var(--contact-page-color);
}

What I want to happen, is when the user visits the website, they see 4 full page sections, with the first one being red, the second orange, the third green, and the fourth blue. However, only 3 sections seem to be showing up, with the first section as orange, and not red. Why is this?

You can see the problem here: https://personal-website.stcollier.repl.co/

Here is my full code:

:root {
  --text-glow-color: black;
  --small-text-glow-color: white;
  --home-page-color: red;
  --about-page-color: orange;
  --projects-page-color: yellow;
  --contact-page-color: green;

}

html,
  body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
}

@keyframes slideInFromLeft {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;display: block;}
}

header {  
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 3vh;
}

header a {
   opacity: 0;
   animation-fill-mode: forwards;
   animation-name: fadeIn;
   animation-timing-function: ease;
   text-decoration: none;
   animation-duration: 2s; 
   color: white;
   font-size: 1.5em;
   padding: 2vw;
   text-shadow: 0 0 10px var(--small-text-glow-color), 0 0 20px var(--small-text-glow-color), 0 0 30px var(--text-glow-color), 0 0 40px var(--text-glow-color), 0 0 50px var(--text-glow-color), 0 0 60px var(--text-glow-color), 0 0 70px var(--text-glow-color);
}

header a:nth-child(1) { /*Home*/
  animation-delay: 1s;
}
header a:nth-child(2) { /*About*/
  animation-delay: 1.5s;
}
header a:nth-child(3) { /*Projects*/
  animation-delay: 2s;
}
header a:nth-child(4) { /*Contact*/
  animation-delay: 2.5s;
}

section {
  height: 100vh;
}

section:nth-child(1) {
  background-color: var(--home-page-color);
}

section:nth-child(2) {
  background-color: var(--about-page-color);
}

section:nth-child(3) {
  background-color: var(--projects-page-color);
}

section:nth-child(4) {
  background-color: var(--contact-page-color);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <header>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </header>

    <section id="home">
    </section>

    <section id="about">
    </section>

    <section id="projects">
    </section>

    <section id="contact">
    </section>

    <script src="script.js"></script>
  </body>
</html>

Thanks for any help.

CodePudding user response：

It does not work as intended, because nth-child(1) stands for <header> element here. It is because nth-child() selector counts all the child elements, regardless of the type.

You can solve it either by counting from the second child...

section:nth-child(2) {
  background-color: var(--home-page-color);
}

... or by using nth-of-type() selector, which takes element type into account

section:nth-of-type(1) {
  background-color: var(--home-page-color);
}