This is my code, and the :first-child is not working?

Question

In this case first-child is not working? what should I do ? This is my code, and the :first-child is not working?

<!DOCTYPE html>
<html>

<head>
  <style>
    .circle:first-child {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: example;
      animation-duration: 6s;
      animation-timing-function: linear;
    }
    
    @keyframes example {
      0% {
        left: 0px;
        top: 0px;
      }
      25% {
        left: 300px;
        border-radius: 0px;
      }
      50% {
        left: 300px;
        border-radius: 100px;
      }
      75% {
        left: 0px;
        border-radius: 100px;
      }
      100% {
        left: 0px;
        border-radius: 0px;
      }
    }
  </style>
</head>

<body>
  <div class="circle"></div>
  <div class="circle"></div>
</body>

</html>

What is "_is not working_" supposed to mean? Your code steals your pocket money? — Teemu, Nov 15 '21 at 10:42
@RamondeVries it doesn't mean that. It means any first-child having the class .circle — Temani Afif, Nov 15 '21 at 10:45
inspect the code to notice the real first child if your body element — Temani Afif, Nov 15 '21 at 10:47

score 1 · Answer 1 · answered Nov 15 '21 at 10:42

You are probably looking for the first-of-type pseudo-class

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

MDN Web doc page

<!DOCTYPE html>
<html>

<head>
  <style>
    .circle:first-of-type{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: example;
      animation-duration: 6s;
      animation-timing-function: linear;
    }
    
    @keyframes example {
      0% {
        left: 0px;
        top: 0px;
      }
      25% {
        left: 300px;
        border-radius: 0px;
      }
      50% {
        left: 300px;
        border-radius: 100px;
      }
      75% {
        left: 0px;
        border-radius: 100px;
      }
      100% {
        left: 0px;
        border-radius: 0px;
      }
    }
  </style>
</head>

<body>
  <div class="circle"></div>
  <div class="circle"></div>
</body>

</html>

This is my code, and the :first-child is not working?

1 Answers1