Come stile ogni elemento p dispari dopo l'elemento h2 occorso in css?

Question

Ho un HTML che viene incasinato e non posso cambiarlo, sembra che questo:

<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> 

Ora vorrei fare ogni p strano che arriva dopo un elemento h2 più audace. quindi vorrei che questo sia in grassetto :

This is a message 

Two cat 

Dog 0 

Dog 2 

Come scrivere un selettore in CSS (senza jQuery, nessun JS disponibili) per rendere quei testi in grassetto?

Answer 1

È possibile farlo utilizzando il selettore css ~, seguito dal selettore nth-of-type (in alternativa nth-child). Puoi leggere ulteriori informazioni su questi selettori su MDN: General Sibling Selector e :nth-of-type.

Ed ecco come ottenere ciò che volevi. In sostanza, si sta selezionando tutti dispari<p> elementi che sono fratelli (cioè che verranno dopo) un tag <h2>.

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; 
}