CODEWITHSUNDEEP
htmlcsscss-selectors
Devang Singh
Devang Singh

Reputation: 1

Applying certain css only for the first occurrence in the html

I have a html like below:

<div class="A"> --- Div 0 There can be multiple of this
    <div class="B C"></div>
</div>

<div class="A"> --- Div 1
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 2
    <div></div>
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 3
    <div class="B C D"></div>
</div>

I want certain styling to be applied to <div class="B C D"></div> only for Div 1.

I have used css .B.C.D:first-of-type for doing this, but it is also affecting Div 3.

I donot have control over HTML and want to resolve it only using CSS

Upvotes: 0

Views: 3628

Answers (1)

Kiran
Kiran

Reputation: 20313

Use :first-child to get first child among a group of elements. Try this:

.A:first-child > div.B.C{
  background-color:red;
}
<div class="A"> --- Div 0 There can be multiple of this
    <div class="B C">There can be multiple of this</div>
</div>

<div class="A"> --- Div 1
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 2
    <div></div>
    <div class="B C D"></div>
</div>
<div class="A"> --- Div 3
    <div class="B C D"></div>
</div>

Upvotes: 2

Related Questions