Issue
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>
Answered By - dippas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.