نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .

 برای توضیح و درک این روابط در یک سند HTML یک سند ساده را به عنوان مثال در نظر خواهیم گرفت

برای درک بهتر مطالب نمودار درختی این سند HTML به شکل زیر ترسیم خواهد شد .

جد -Ancestor

جد – Ancestor – اشاره دارد به عنصری که در بالاترین سطح و در نوک درخت قرار می گیرد . مهم نیست که چقدر و چند سطح بالاتر است . در نمودار زیر عنصر body جد تمامی عناصر موجود در این سند HTML است به این معنی که در بالاترین سطح قرار دارد .

به این نکته توجه کنید که هر عنصری که زیر مجموعه دارد می تواند جد زیر مجموعه خودش باشد . به این معنی که در نمودار زیر هر کدام از div ها جد زیر مجموعه خودشان هستند .

نسل – Descendant

نسل – Descendant – اشاره دارد به تمامی عناصری که در درخت یک سند HTML با یکدیگر متصلند و در زیر مجموعه یک عنصر قرار می گیرند . مهم نیست در چند سطح پائینتر قرار گرفته اند .

در نمودار بالا تمامی عناصر متصل به div مشخص شده نسل این div هستند

والدین – Parent

والدین – Parent دقیقا اشاره دارد به عنصر بالا دستی و متصل در درخت یک سند HTML . در نمودار زیر div مشخص شده والدین ul است .

فرزند – Child

فرزند – Child دقیقا اشاره دارد به عنصر پائین دستی و متصل در درخت یک سند HTML . در نمودار زیر ul فرزند div مشخص شده است .

خواهر و برادر – Sibling

خواهر و برادر ها – Sibling – عناصری هستند که دارای یک والدین مشترک هستند . توجه داشته باشید که خواهر و برادرها در یک سطح قرار خواهند گرفت .

در نمودار زیر کلیه عناصر li با یکدیگر خواهر و برادر هستند و در یک سطح قرار دارند .

بررسی موقعیت یک عنصر در یک درخت سند HTML

با توجه به توضیحات ارائه شده یک عنصر در درخت یک سند HTML می تواند نقش های گوناگونی را داشته باشد . می تواند نسل یک جد باشد و یا جد یک نسل دیگر . یک فرزند باشد و در عین حال خود یک والدین . درک این تفسیر های گوناگون می تواند در گزینش بهتر یک عنصر HTML بسیار تاثیر گزار باشد .

با توجه به نمودار زیر وضعیت و نقش های یکی از عناصر که با رنگ تیره مشخص شده است را بررسی می کنیم .

• فرزند body
• والدین عنصر ul
• جد عناصر ul و li
• برادر و یا خواهر دیگر عنصر div موجود در درخت .