CODEWITHSUNDEEP
htmlcsscss-selectors
user4255025
user4255025

Reputation:

first child css is not working

<div class="parent-div">
 
 <p>
  <b>1. Some dummy text</b><br>
  <b>2. Some other dummy text</b><br>
  <b>3. Some other more dummy text</b><br>
 </p>

 <p>
  <b>4. Some dummy text</b><br>
  <b>5. Some other dummy text</b><br>
  <b>6. Some other more dummy text</b><br>
 </p>

</div>

I want to hide the 1st most <b> tag and wrote :

.parent-div b:first-child {display:none;}

But it's not working.

Upvotes: 2

Views: 336

Answers (3)

Mohamed Rihan
Mohamed Rihan

Reputation: 119

.parent-div > p b:first-child {display:none;}
<div class="parent-div">
 
 <p>
  <b>1. Some dummy text</b><br>
  <b>2. Some other dummy text</b><br>
  <b>3. Some other more dummy text</b><br>
 </p>

 <p>
  <b>4. Some dummy text</b><br>
  <b>5. Some other dummy text</b><br>
  <b>6. Some other more dummy text</b><br>
 </p>

</div>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

change css 

.parent-div p b:first-child {display:none;}

Upvotes: 1

web-tiki
web-tiki

Reputation: 103780

The issue is that with .parent-div b:first-child {display:none;} you are hidding the first b tag of every <p> element. To only hide the first <b> in the first <p> you can use .parent-div p:first-child b:first-child {display:none;} :

.parent-div p:first-child b:first-child {display:none;}
<div class="parent-div">
 
 <p>
  <b>1. Some dummy text</b><br>
  <b>2. Some other dummy text</b><br>
  <b>3. Some other more dummy text</b><br>
 </p>

 <p>
  <b>4. Some dummy text</b><br>
  <b>5. Some other dummy text</b><br>
  <b>6. Some other more dummy text</b><br>
 </p>

</div>

Upvotes: 4

Related Questions