CSS selectors - How can I individually select the spans inside my container?

Question

I'm trying to select each individual span inside my .card--container but I'm unable to do it. I have tried :nth-of-type :nth-child, but I'm missing something essential.

Here is a codepen

And this is my inline code.

<ul class="card--container">
  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Pink</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>
  
  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Gray</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>
  
  <li class="card">
    <header class="card__header">
      <h1>
        <a href="" class="card__link">Repo Title</a>
      </h1>
      <span>Green</span>
    </header>
    <p class="card__content">Repo Content</p>
    <footer class="card__footer">Footer</footer>
  </li>
</ul>

<p>Comment out <code>animation:sideLeft</code> and add <code>opacity: 1</code> on the <code>.card</code> to make debug easier.

/// Mixins
/// @name Size Mixin
/// @param { Number } $width - Width
/// @param { Number } $height - $width
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin keyframes($name) {
    @keyframes #{$name} {
      @content;
    }
}


/// @name Flex Mixin
/// @param { String } $flow 
/// @param { String } $justify
/// @param { String } $alingnment
@mixin display-flex($args...) {
  display: flex;
  flex-flow: nth($args, 1); /*1*/
  justify-content: nth($args, 2); /*2*/
  align-items: nth($args, 3); /*3*/
}


/// Variables
$gray: hsla(0, 0%, 88.6%, 1);
$black: hsla(0, 0%, 0%, 1);
$white: hsla(0, 0%, 100%, 1);
$blue: hsla(300, 47%, 75%, 1);
$yellow: hsla(60, 46.9%, 74.9%, 1);

$color-primary: hsla(300, 47%, 75%, 1); /* #dda1dd */
$color-secondary: hsla(150, 47%, 75%, 1); /* #a1ddbf */

body, html {
  background: $white;
  width: 100vw;
  height: 100vh;
  border: 1px solid $color-primary;
};

p {
  font-size: 1.5rem;
  text-align: center;
  color: $color-primary;
}

.card--container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  @include size(90vw, 500px);
  border: 2px solid $gray;
  list-style: none;
  margin: 0 auto;
}

.card {
  @include display-flex(column, space-around, stretch);
  @include size(400px, 150px);
  opacity: 0;
  border: 2px solid $gray;
  border-radius: 10px;
  box-shdow: 3px 3px 3px 5px $gray;
  @include keyframes(slideLeft) {
    0% {
      transform: translateX(1500px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @for $i from 0 through 4 {
    &:nth-child(#{$i}) {
      animation: slideLeft;
      animation-duration: 1s + ($i * 400ms);
      animation-iteration-count: 1;
      animation-delay: 1.5s + ($i * 400ms);
      animation-fill-mode: forwards;
    } 
  }
  
  &__header {
    @include display-flex(row, space-around, center);
    flex-basis: 25%;
    
     h1 {
      @include size(90%);
      letter-spacing: 0.1rem;
    }
    
     span {  /* ERROR Here Will like to select each individual span */
      @include size(15px, 15px);
      border-radius: 100%;
      background-color: $color-primary;
      text-align: center;      
    }
  }
  
  &__link {
    color: $gray;
    text-decoration: none;
    font-size: 1em;
  }
  
  &__content {
    color: $gray;
    font-size: 2em;
    flex-basis: 50%;
    text-align: center; 
  }
  
    
  &__footer {
    @extend .card__header;
    color: $gray;
  }
}

Answer 1

To apply different styles to every span, you actually can select them using the :nth-of-type(n) pseudo-selector. What you do have to remember is that this pseudo-selector cannot be used on classes, so it will take the element instead of it. Fortunately, this element (li) is unique in your case.

.card--container {
    li:nth-of-type(1) span {
        background-color: #F00;
    }
    li:nth-of-type(2) span {
        background-color: #0F0;
    }
    li:nth-of-type(3) span {
        background-color: #00F;
    }
}

I've updated your codepen with a working example,

Codepen link