How to apply a CSS to first element of class only?

Yes, as you have heard of :first-child, we can use it and apply a different CSS style to first one, so as for your requirement, CSS code should be

 .a > .b {
     border-top: 5px solid black
}

.a > .b:first-child {
    border-top: none
}

In the above CSS code, we are first giving border-top to all the child element of "a" class which has "b" class, in the second line of the code we are removing border-top from the only first-child element of "a" class which has "b" class.

The :first-child selector allows you to target the first element immediately inside another element, it is used to style content based on its relationship with parent and sibling content.

you can also use first-of-type or nth-of-type(1) CSS propertu to apply on first element of class

.changeColor{
  color: green;  
}

.changeColor:first-of-type {
  color: red;  
}

HTML

<div class="home">
  <p class="changeColor">first</p>
  <p class="changeColor">second</p>
  <p class="changeColor">third</p>
  <p class="changeColor">fourth</p>
</div>

Here is fiddle https://jsfiddle.net/9Lk58gzb/

Thanks

You can also use the :nth-of-type selector, to apply CSS to first element only. Example

.b:nth-of-type(1)
{
    border:5px solid red;
} 

Should apply red-border of 5px to first element only, since we mentioned :nth-of-type(1), if we had to apply CSS on third element, then CSS would be :nth-of-type(3)

<div class="a">
   <div class="b">Test</div>
   <div class="b">Test</div>
    <div class="b">Test</div>
</div>

Fiddle link: https://jsfiddle.net/d4bhxyk3/

Thanks