Non, ce n'est pas possible via CSS. Il prend à cœur la "Cascade" ;-).
Cependant, si vous pouvez ajouter JavaScript à votre page, un peu de jQuery pourrait vous permettre d'atteindre votre objectif final.
Vous pouvez utiliser jQuery findpour effectuer une "anticipation" sur votre élément / classe / id cible, puis revenir en arrière pour sélectionner votre cible.
Ensuite, vous utilisez jQuery pour réécrire le DOM (CSS) pour votre élément.
Sur la base de cette réponse de Mike Brant , l'extrait de code jQuery suivant pourrait vous aider.
$('p + ul').prev('p')
Cette première sélectionne tous les <ul>s qui suivent immédiatement a <p>.
Ensuite, il "revient en arrière" pour sélectionner tous les <p>s précédents de cet ensemble de <ul>s.
En effet, "frère précédent" a été sélectionné via jQuery.
Maintenant, utilisez la .cssfonction pour passer vos nouvelles valeurs CSS pour cet élément.
Dans mon cas, je cherchais un moyen de sélectionner un DIV avec l'id #full-width, mais UNIQUEMENT s'il avait un DIV descendant (indirect) avec la classe de .companies.
J'avais le contrôle de tout le HTML sous .companies, mais je ne pouvais pas modifier le HTML au-dessus.
Et la cascade ne va que dans un sens: vers le bas.
Ainsi, je pouvais sélectionner TOUS les #full-widths.
Ou je pourrais sélectionner .companiesqui a seulement suivi a #full-width.
Mais je ne pouvais pas sélectionner uniquement les #full-widths qui se déroulaient .companies .
Et, encore une fois, je n'ai pas pu ajouter .companies plus haut dans le HTML. Cette partie du code HTML a été écrite en externe et a enveloppé notre code.
Mais avec jQuery, je peux sélectionner les #full-widths requis , puis attribuer le style approprié:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Cela trouve tout #full-width .companies, et sélectionne seulement ceux-ci .companies, de la même manière que les sélecteurs sont utilisés pour cibler des éléments spécifiques en standard en CSS.
Ensuite, il utilise .parentspour "revenir en arrière" et sélectionner TOUS les parents de .companies,
mais filtre ces résultats pour ne conserver que les #fill-widthéléments, de sorte qu'à la fin,
il ne sélectionne un #full-widthélément que s'il a un .companiesdescendant de classe.
Enfin, il attribue une nouvelle widthvaleur CSS ( ) à l'élément résultant.
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
Documents de référence jQuery:
$ () ou jQuery () : élément DOM.
. find : récupère les descendants de chaque élément dans l'ensemble actuel d'éléments correspondants, filtré par un sélecteur, un objet jQuery ou un élément.
. parents : Obtenez le frère immédiatement précédent de chaque élément dans l'ensemble des éléments correspondants. Si un sélecteur est fourni, il ne récupère le frère précédent que s'il correspond à ce sélecteur (filtre les résultats pour n'inclure que les éléments / sélecteurs répertoriés).
. css : définissez une ou plusieurs propriétés CSS pour l'ensemble des éléments correspondants.