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

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 >

  <div >
   <span>Example 1</span>
   <span>Example 2</span>
  </div>

</div>

CodePudding user response：

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.

CodePudding user response：

For your example you can also use:

.box span:first-of-type {
    font-size: 28px;
}

.box span:last-of-type {
    font-size: 18px;
}

Be sure to take a look at All CSS Pseudo Classes.