Context, selector de copii și vecini css

Primul paragraful din div

Al doilea paragraful din div

Un text îndrăzneț în div

Primul paragraful din corp

Un element parent este o etichetă care conține elementul în cauză.

În exemplul relației părinte-copil:

Elementul div (2 linii) este părintele etichetei h1 (3 linii), în timp ce h1 este copilul (copilul)
Elementul p (4 linii) este părinte la puternic (4 linii), în timp ce puternic - dimpotrivă, copilul (copilul)
Elementul div (2 linii) este părintele puternic (6 linii), în timp ce puternic - dimpotrivă, copilul (copilul)
Elementul p (8 linii) este părintele puternic (8 linii), în timp ce puternic - dimpotrivă, copilul (copilul)
Elementul corpului (1 linie) este părintele div (2 linii) și p (8 linii)

Un strămoș este un element care este mai înalt de câteva niveluri și conține elementul în cauză.

În exemplu, relația părinte-copil:

Elementul corp este un strămoș pentru elementele h1 (linia 3), p și puternic (linia 4), p și puternic (linia 5), puternic (linia 6) și puternic (linia 8); în timp ce toate elementele enumerate sunt descendenți ai corpului
Elementul div (2 linii) este un strămoș pentru elementele puternice (linia 4 și 5); în timp ce puternic este un descendent al div

Elementul frățez (învecinat) este un element care are un părinte obișnuit cu subiectul.

În exemplu, atitudinea vecinilor (frați):

Elementele h1 (3 linii), p (4 linii), p (5 linii) și puternic (6 șir) sunt frați sau elemente învecinate.
Elementele div (2 linii) și p (8 linii) sunt frați sau elemente învecinate.

Selectorii de context CSS (descendenți ai strămoșilor)

Regulile selectorilor contextuali se aplică și relației părinte-copil.