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
答案 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>