آموزش شبه کلاس هایِ ساختاری در CSS

اکثر شبه کلاس ها، ماهیت ساختاری دارند؛ یعنی آنها به ساختار علامت گذاری سند رجوع می کنند. بیشتر شبه کلاس ها، به الگوهای درون علامت گذاری بستگی دارند؛  اما دیگر شبه کلاس ها، به ما امکان می دهند تا انواع خاصی از عناصر را مخاطب قرار دهیم. تمام شبه کلاس ها، بدون استثنا، یک کلمه هستند که قبل از هرکدام، یک علامت دونقطه(:) قرار دارد و می توانند در هرکجا از سلکتورها قرار داده شوند.

شبه کلاس ها، همواره به عنصری رجوع می کنند که به آن پیوست شده اند(و نه چیز دیگر). برای نشان دادن این موضوع، یک خاطره ی شخصی از نویسنده ی این کتاب بیان می کنیم: وقتی که اولین فرزند من در سال 2003 متولد شد، من این موضوع را به صورت آنلاین (به اعضای خانواده یا دیگران) اعلام کردم. بسیاری از اقوام، با پیامک های تبریک یا شکلک های خنده دار واکنش نشان دادند.بهترین پیامی که دریافت کردم، به صورت زیر بود:

#ericmeyer:firstchild

مشکلی که وجود دارد این است که این سلکتور تنها می تواند من را انتخاب کند و نمی تواند دختر من را گزینش کند. و تنها اگر من اولین فرزندِ خانواده ی خود باشم، سلکتور من را انتخاب می کند. برای اینکه به درستی، اولین فرزند خود را گزینش (یا انتخاب) کنیم، نیاز داریم از دستور زیر استفاده کنیم:

#ericmeyer > :first-child

فقط همواره به یاد داشته باشید که تاثیر شبه کلاس ها، این است که یک نوع کلاسِ شبح مانند را به عنصری که به آن پیوند داده شده اند، اعمال کند.