CSS :first-of-type selector apply to all (using html tag and not class)

March 22, 2022

The :first-of-type selector applies to all my p tags, i read online that you can only use it for HTML elements and not classes, so i’m using it on p tag and it still applies for all the p tags. What’s the issue ?

.doing p {
    font-size: calc(0.5vw + 12px);
    color: #2A2A2C;
    font-weight: 300;
}

.doing p:first-of-type {
    padding-top: 45px;
    padding-bottom: 7%;
    width: 70%;
}

<section class="doing">
        <h1 class="doing-title">What we <span>do.<img src="style/img/linepurple.png" class="line-purple-do"
                    alt=""></span></h1>
        <p>Linking advertisers and publishers to their maximum potential.
            Axeite develops desktop and mobile applications. We also offer a smart targeting affiliation system that is
            fraudproof. With a thorough tracking capability, the Axeite affiliation system is transparent and offers
            insightful reports for your business.
        </p>

        <div class="doing-boxes">
            <div class="box">
                <div class="circle"></div>
                <p>Axeite connects advertisers and publishers globally. With fast integration on high-performing
                    products for web, mobile (iOS and Android), and video, that’s a win-win.
                </p>
            </div>
            <div class="box">
                <div class="circle"></div>
                <p>Monetize with our creative and authentic solutions while engaging every user throughout the marketing
                    funnel
                </p>
            </div>
            <div class="box">
                <div class="circle"></div>
                <p>Our all-round monetization packages are fit for all business demands in any industry. With them, you
                    maximize your ROI without the stress of expensive trial-and-error methods.
                </p>
            </div>
        </div>
    </section>

As you can see in the code snippet, the padding applies to all p tags..

>Solution :

You have multiple solutions even if don’t want to add class to that p:

Solution 1

Apply :first-of-type to .doing instead and you need to use > to apply only to direct children of doing otherwise it would apply to all p inside of .doing

.doing p {
  font-size: calc(0.5vw + 12px);
  color: #2A2A2C;
  font-weight: 300;
}

.doing:first-of-type > p {
  padding-top: 45px;
  padding-bottom: 7%;
  width: 70%;
  background: red;
}

<section class="doing">
  <h1 class="doing-title">What we <span>do.<img src="style/img/linepurple.png" class="line-purple-do" alt=""></span></h1>
  <p>Linking advertisers and publishers to their maximum potential. Axeite develops desktop and mobile applications. We also offer a smart targeting affiliation system that is fraudproof. With a thorough tracking capability, the Axeite affiliation system
    is transparent and offers insightful reports for your business.
  </p>

  <div class="doing-boxes">
    <div class="box">
      <div class="circle"></div>
      <p>Axeite connects advertisers and publishers globally. With fast integration on high-performing products for web, mobile (iOS and Android), and video, that’s a win-win.
      </p>
    </div>
    <div class="box">
      <div class="circle"></div>
      <p>Monetize with our creative and authentic solutions while engaging every user throughout the marketing funnel
      </p>
    </div>
    <div class="box">
      <div class="circle"></div>
      <p>Our all-round monetization packages are fit for all business demands in any industry. With them, you maximize your ROI without the stress of expensive trial-and-error methods.
      </p>
    </div>
  </div>
</section>

Solution 2

Using + in .dong-title like this:

.doing p {
  font-size: calc(0.5vw + 12px);
  color: #2A2A2C;
  font-weight: 300;
}

.doing-title + p {
  padding-top: 45px;
  padding-bottom: 7%;
  width: 70%;
  background: red;
}

<section class="doing">
  <h1 class="doing-title">What we <span>do.<img src="style/img/linepurple.png" class="line-purple-do" alt=""></span></h1>
  <p>Linking advertisers and publishers to their maximum potential. Axeite develops desktop and mobile applications. We also offer a smart targeting affiliation system that is fraudproof. With a thorough tracking capability, the Axeite affiliation system
    is transparent and offers insightful reports for your business.
  </p>

  <div class="doing-boxes">
    <div class="box">
      <div class="circle"></div>
      <p>Axeite connects advertisers and publishers globally. With fast integration on high-performing products for web, mobile (iOS and Android), and video, that’s a win-win.
      </p>
    </div>
    <div class="box">
      <div class="circle"></div>
      <p>Monetize with our creative and authentic solutions while engaging every user throughout the marketing funnel
      </p>
    </div>
    <div class="box">
      <div class="circle"></div>
      <p>Our all-round monetization packages are fit for all business demands in any industry. With them, you maximize your ROI without the stress of expensive trial-and-error methods.
      </p>
    </div>
  </div>
</section>