Wie style jedes ungerade p-Element nach h2-Element in CSS aufgetreten?

Question

Ich habe einen HTML-Code, verwirrt ist, und ich kann es nicht ändern, sieht es wie folgt aus:

<div> 
    <h2>This is a title cat</h2> 
    <p>This is a message</p> 
    <p>One cat</p> 
    <p>Two cat</p> 
    <p>Three cat</p> 
    <h2>This is a title dog</h2> 
    <p>Dog 0</p> 
    <p>Dog 1</p> 
    <p>Dog 2</p> 
    <p>Dog 3</p> 
</div> 

Nun würde Ich mag jede ungerade p machen, nachdem ein h2-Element kühner kommt. So würde Ich mag diese in fett sein:

This is a message 

Two cat 

Dog 0 

Dog 2 

Wie ein Selektor in CSS schreiben (kein jQuery, keine JS verfügbar), um diese Texte fett zu machen?

Answer 1

Sie können dies tun, indem Sie die css ~ Selektor, gefolgt von der nth-of-type (alternativ nth-child) Selektor verwenden. Sie können mehr über diese Selektoren auf dem MDN lesen: General Sibling Selector und :nth-of-type.

Und hier ist, wie Sie erreichen, was Sie wollten. Im Wesentlichen wählen Sie alle ungerade<p> Elemente aus, die Geschwister (sind, die nach kommen) ein <h2>-Tag sind.

h2 ~ p:nth-of-type(odd) { 
 
    font-weight: 600; 
 
}

<div> 
 
    <h2>This is a title cat</h2> 
 
    <p>This is a message</p> 
 
    <p>One cat</p> 
 
    <p>Two cat</p> 
 
    <p>Three cat</p> 
 
    <h2>This is a title dog</h2> 
 
    <p>Dog 0</p> 
 
    <p>Dog 1</p> 
 
    <p>Dog 2</p> 
 
    <p>Dog 3</p> 
 
</div>

Answer 2

h2 ~ p:nth-of-type(2n+1){ 
font-weight: 600; 
}