CSS selector for non-know tags

时间:2016-07-11 20:31:23

标签: css

I would likke to apply some CSS styling in all <img> that is inside the intro-content-detalhes. But the image could be inside of N <p> or <span> or <div>. And no matter what the selector should get there and apply the style.

Bellow a code example showing the hierarchy:

https://jsfiddle.net/es21q6r2/

<div class="intro">
    <table class="intro-container-consulta" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <table class="intro-content-consulta" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td class="intro-content-detalhes">
                                    <span readonly="true" textmode="MultiLine" style="display:inline-block;border-width:0px;width:100%;"><div class="ExternalClass24F5146CDC884387BF8C4A509ABE9CC2"><div></div>
                                        <div>
                                        </div>
                                        <p>Item title</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="" class="ct-active">​</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <div style="text-align:left">Item details</div>
                                        <div>
                                        </div>
                                        <p></p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <ol>
                                        <li><div style="text-align:left">Example #1: <span style="color:rgb(255, 0, 0)">A, B, C</span></div></li>
                                        <li><div style="text-align:left">AA</div></li>
                                        <li><div style="text-align:left">BB</div></li>
                                        <li><div style="text-align:left">CC</div></li>
                                        </ol>
                                        <div>
                                        </div>
                                        <div><br></div>
                                        <div style="text-align:center">
                                        <img src="https://s1.yimg.com/bt/api/res/1.2/mQAfNGBLFnjCvmN4ThWysQ--/YXBwaWQ9eW5ld3NfbGVnbztxPTc1O3c9NjAw/https://s.yimg.com/dh/ap/default/141103/logo2.png" alt=""></div>
                                        <div>
                                        </div>
                                        <p></p></div>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Thanks for any help with this

1 个答案:

答案 0 :(得分:1)

You're using the child selector, > which only selects an element if it's the child of another. You simply want all images so remove that. The rule .intro .intro-content-consulta img says select all images that are descendants of all elements with the class intro-content-consulta that are descendants of the class intro:

.intro .intro-content-consulta img {
  padding: 5px;
  border: 1px black solid
}
<div class="intro">
  <table class="intro-container-consulta" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
          <table class="intro-content-consulta" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="intro-content-detalhes">
                  <span readonly="true" textmode="MultiLine" style="display:inline-block;border-width:0px;width:100%;"><div class="ExternalClass24F5146CDC884387BF8C4A509ABE9CC2"><div></div>
                                        <div>
                                        </div>
                                        <p>Item title</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="" class="ct-active">​</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <div style="text-align:left">Item details</div>
                                        <div>
                                        </div>
                                        <p></p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <ol>
                                        <li><div style="text-align:left">Example #1: <span style="color:rgb(255, 0, 0)">A, B, C</span>
</div>
</li>
<li>
  <div style="text-align:left">AA</div>
</li>
<li>
  <div style="text-align:left">BB</div>
</li>
<li>
  <div style="text-align:left">CC</div>
</li>
</ol>
<div>
</div>
<div>
  <br>
</div>
<div style="text-align:center">
  <img src="https://s1.yimg.com/bt/api/res/1.2/mQAfNGBLFnjCvmN4ThWysQ--/YXBwaWQ9eW5ld3NfbGVnbztxPTc1O3c9NjAw/https://s.yimg.com/dh/ap/default/141103/logo2.png" alt="">
</div>
<div>
</div>
<p></p>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>