How to select element inside another with CSS?

Navigation
2

I have a WordPress theme that, when it runs, generates the following code: 

<div class="wpb_wrapper">
  <article class="icon-box11">
    <i class="fa-shield" style=" font-size:3em; color:#00ced1;"></i>
    <h4>ANOS DE GARANTIA</h4>
    <p>Todos os produtos instalados possuem 5 anos de garantia contra defeitos de fabricação.<br></p>
  </article>
</div>

Based on the icon-box11 class, how do you create a CSS code that changes the elements h4 and p ?

Hugs.

    
asked by anonymous 22.05.2018 / 22:46

2 answers

2

Here's an example: 

.icon-box11 h4{
  color:red;
}

.icon-box11 p{
  color:blue;
}
<div class="wpb_wrapper">
<h4>H4 fora do icon-box11</h4>
<p>P fora do icon-box11</p>
  <article class="icon-box11">
    <i class="fa-shield" style=" font-size:3em; color:#00ced1;"></i>
    <h4>ANOS DE GARANTIA</h4>
    <p>Todos os produtos instalados possuem 5 anos de garantia contra defeitos de fabricação.<br></p>
  </article>
</div>
    
22.05.2018 / 22:54
2

You treat the childs with concatenated elements in the msm line: 

 .icon-box11 h4{
  }

and 

.icon-box11 p{
 }

In this way the rule will apply only to H4 and p daughters of its class icon-box11

    
22.05.2018 / 22:50
How to clean Bootstrap style sheet (CSS)? Generate Excel with query php