How to select one element within another with CSS?

Asked

Viewed 1,312 times

2

I have a Wordpress theme that, when running, 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 class icon-box11, how to create a CSS code that changes the elements h4 and p?

Hugs.

css

2 answers

2

Voce treats Childs with elements concatenated in msm line:

 .icon-box11 h4{
  }

and 

.icon-box11 p{
 }

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

2


Follow 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>

  • your answer is correct, but only to understand better, if I wanted to access these same tags, but coming from the wpb_wrapper class, as I would do?

  • You change the selector to it and all the elements declared inside will receive the style.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.