En Css, comment sélectionner la classe d'une balise span dont le parent est un div avec la classe "X"?

Question

Je traite un problème complexe, en effet, je veux changer le css sur ce morceau de code:

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left circular et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay"> 
<a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" /> 
<span class="et_overlay"></span></a> 
</div> 

Je dois changer la classe et_overlay et je veux surtout changer cette classe pour la balise span qui parent est un div avec la classe circular, ce qui est le cas dans cette partie du code. (certaines autres parties du code ont la même configuration mais sans la classe circular et je ne veux pas changer ces parties)

J'ai vérifié les différents sélecteurs CSS mais je n'ai pas trouvé de sélecteur correspondant à mes besoins.

Une idée?

Une grande partie grâce

Answer 1

Utilisez .circular span.et_overlay (notez l'espace ) - voir la démo ci-dessous:

.circular span.et_overlay { 
 
    color: red; 
 
}

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left circular et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay"> 
 
    <a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" /> 
 
    <span class="et_overlay">hello</span></a> 
 
</div> 
 

 
<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left et_pb_image_2 et_always_center_on_mobile et_pb_has_overlay"> 
 
    <a href="https:/....ee/?page_id=460"><img src="https://..../wp-content/uploads/2017/00565531_813167153_o.jpg" alt="" /> 
 
    <span class="et_overlay">hello</span></a> 
 
</div>