selector در CSS و بررسی selector از قبیل id و class :
یکی از مهمترین قابلیت‌های CSS، استفاده از selectorها است. یک selector برای انتخاب المان‌هایی که می‌خواهید به آن‌ها قوانین CSS اعمال کنید، استفاده می‌شود. در CSS، چندین نوع selector وجود دارد که برای انتخاب المان‌ها مورد استفاده قرار می‌گیرند. در این مقاله، با دو نوع اصلی selector یعنی id و class، آشنا خواهید شد.
selectorهای id
selectorهای id، برای انتخاب المان‌هایی استفاده می‌شوند که یک شناسه (id) دارند. شناسه هر المان باید در سنتاکس HTML، با علامت # تعریف شود. به عنوان مثال، برای انتخاب المانی که شناسه آن header باشد، از selector #header استفاده می‌شود. در این حالت، قوانین CSSی که به این selector اعمال می‌شود، فقط بر روی المانی که شناسه آن header است، اعمال می‌شود.
selectorهای class
selectorهای class، برای انتخاب المان‌هایی استفاده می‌شوند که یک کلاس (class) دارند. در سنتاکس HTML، هر المان می‌تواند یک یا چندین کلاس داشته باشد. برای انتخاب یک المان با استفاده از selector class، باید نام کلاس را با علامت نقطه(.) تعریف کنید. به عنوان مثال، برای انتخاب المانی که کلاس آن menu باشد، از selector .menu استفاده می‌شود. در این حالت، قوانین CSSی که به این selector اعمال می‌شود، بر روی تمام المان‌هایی که کلاس آن‌ها menu است، اعمال می‌شود.
ترکیب selectorها
می‌توانید selectorهای id و class را با یکدیگر ترکیب کنید تا بتوانید به صورت دقیقتری المان‌ها را انتخاب کنید. به عنوان مثال، selector #header .menu، به منظور انتخاب المانی استفاده می‌شود که شناسه آن header و کلاس آن menu باشد.
نکات مهم
– شناسه هر المان در یک صفحه HTML باید منحصر به فرد باشد و نمی‌توانید دو المان با شناسه یکسان داشته باشید. اما هر المان می‌تواند چندین کلاس داشته باشد.
– برای انتخاب چند المان با استفاده از یک selector، از علامت کاما (,) استفاده کنید. به عنوان مثال، selector .menu, .sidebar، به منظور انتخاب المان‌هایی استفاده می‌شود که کلاس آن‌ها menu یا sidebar باشد.
– برای انتخاب المان‌هایی که هیچ کلاس یا شناسه‌ای ندارند، از selector :not() استفاده می‌شود. به عنوان مثال، selector p:not(.intro)، المان‌های p را انتخاب می‌کند که کلاس آن‌ها intro نباشد.
در نهایت، selectorها یکی از اصلی‌ترین قابلیت‌های CSS هستند که به شما امکان می‌دهند تا المان‌های مورد نظر خود را به صورت دقیقتری انتخاب کنید و قوانین CSS خود را بر روی آن‌ها اعمال کنید.
