<h3>p tags with an image get a border, others don't, thanks to :has()</h3>
<div class="has-container">
<div>
<p>I haz red text?<BR>
<img src="http://placekitten.com/200/200" class=".content-image">
</p>
</div>
<div>
<p>No image, blue text 😕<BR></p>
</div>
</div>
h3 {
font-family: arial, sans-serif;
}
.has-container {
font-family: arial, sans-serif;
display: flex;
gap: 20px;
}
p {
color: blue;
}
p:has(img){
color: red;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.