Fratello adiacente - Trucchi CSS

Sommario:

Il combinatore fratello adiacente in CSS non è un selettore di per sé, ma un modo per combinare due selettori. Per esempio:

p + p ( margin: 0; )

Il segno più (+) è il combinatore fratello adiacente, tra due selettori di tag di paragrafo (elemento). Ciò significa "selezionare qualsiasi tag di paragrafo che si trova direttamente dopo un altro tag di paragrafo (senza niente in mezzo)". Ecco alcuni esempi di ciò che selezionerebbe:


I'm a paragraph
I get selected!
I'm a paragraph

Monkey hair
I will NOT get selected

Ciò è particolarmente utile quando si utilizza il markup semantico e si necessita di adattamento per determinati scenari in cui gli elementi sono direttamente uno accanto all'altro.

Vedere il selettore di fratelli adiacenti a penna di Sara Cope (@saracope) su CodePen.