CODEWITHSUNDEEP
htmlcss
Snorlax
Snorlax

Reputation: 293

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

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>

Upvotes: 2

Views: 71

Answers (2)

Sulejman
Sulejman

Reputation: 47

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.

Upvotes: 1

kmoser
kmoser

Reputation: 9273

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.

Upvotes: 3

Related Questions