Is it possible to apply different CSS properties to tags that have no id and class?

Issue

I'm trying to figure out if I can apply different CSS to tags that don't have a class. The example I posted in the snippet obviously doesn't work, but my question is: how can I apply different CSS to the two spans without a class or id?

.box {
display: flex;
flex-direction: column;
}

.box > span 1  {
font-size: 28px;
}

.box > span 2  {
font-size: 18px;
}

<div class="container">

  <div class="box">
   <span>Example 1</span>
   <span>Example 2</span>
  </div>

</div>

Solution

Use the :nth-child() pseudo-class:

.box span:nth-child(1) {
  font-size: 28px;
}

.box span:nth-child(2) {
  font-size: 18px;
}

Alternatively, you can use :first-child and :last-child if you know there will always be two.

Answered By - kmoser