Wie ändert man den CSS-Stil eines HTML-Elements nur, wenn ein bestimmtes Geschwisterelement existiert?

Question

Ich blätterte in der MDN CSS-Dokumentation, aber ich sehe keine Combinators, die das Element auswählen können, das ich stylen möchte.

/* second-span red when first-span is present */ 
 
[first-span] ~ [second-span] { 
 
    color: red; 
 
} 
 

 
/* first-span blue ONLY when second-span is present */ 
 
/* HOW TO ? */ 
 
[first-span] /* combinator doesn't exist */ { 
 
    color: blue; 
 
}

<p> 
 
    <span first-span="">I am #1</span><br> 
 
    <span second-span="">I am #2</span> 
 
</p> 
 

 
<p> 
 
    <span first-span="">I am #1</span> 
 
    <!-- no second span --> 
 
</p> 
 

 
<p> 
 
    <span second-span="">I am #2</span> 
 
</p>

Ich versuche, einen Stil auf ein Element nur anzuwenden, wenn ein anderes angegeben Geschwister unter unter Geschwistern gefunden wird.

Im Snippet wird die erste CSS-Anweisung verwendet, um ein Element zu stylen, wenn die linke Hand im Auswahlausdruck unter den oberen Geschwistern gefunden wird. Aber es scheint, dass es keinen Kombinator gibt, der den gegenteiligen Effekt hat.

Wie kann ich das tun?

Answer 1

Sie können jQuery (um die Dinge sauber), wie folgt verwenden:

if($('p > span:nth-of-type(2)').length) { 
    $('p > span:nth-of-type(1)').css('color','red'); 
} 

Check if element exists in jQuery

Answer 2

Durch nth-child mit anderen Pseudo-Klassen kombiniert es Sie Elemente aus Gruppen von Elementen mit spezifischen Längen angeben können .

Dies wird leicht durch die Nutzung des <br> Tag, als ein untergeordnetes Element von <p> jedoch kompliziert, sollte dies nach wie vor für Ihre Bedürfnisse arbeiten:

/* this will color the first element of three children nested in a p tag blue */ 
 
p span:nth-child(1):nth-last-child(3){ 
 
    color: blue; 
 
} 
 

 
/* this will color the third element of three children nested in a p tag red */ 
 
p span:nth-child(3):nth-last-child(1) { 
 
    color: red; 
 
}

<p> 
 
    <span first-span="">I am #1</span><br> 
 
    <span second-span="">I am #2</span> 
 
</p> 
 

 
<p> 
 
    <span first-span="">I am #1</span> 
 
    <!-- no second span --> 
 
</p> 
 

 
<p> 
 
    <span second-span="">I am #2</span> 
 
</p>

Dies zielt auf die erstes von drei Elementen, dann das letzte von drei.