techrookie techrookie -4 years ago 82
CSS Question

CSS to child p tag not getting applied based on parent div's class

I have to apply different styles to p tag which is created under to 2 seprate divs.



.wrapper .extraclass p{
color: green;
}

.wrapper .class1 p{
color: red;
}

<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>





The color for both p's is same. How can I reorganize my css to make this work?

Answer Source

Put you css in this way, so it can override above global css,

.wrapper .class1 p{
  color: red;
}
.wrapper .extraclass p{
  color: green;
}

.wrapper .class1 p will select all p tags within .class1 if you want to override css of .extraclass p you have to put it after .wrapper .class1 p css

.wrapper .class1 p {
  color: red;
}

.wrapper .extraclass p {
  color: green;
}
<div class="wrapper">
  <div class="class1 class2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <div>
<div>

<div class="wrapper">
  <div class="extraclass class1 class2">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div>
<div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download