انتخابگرها (Selectors) در css :

انتخابگرها (Selectors) در CSS یکی از اصولی‌ترین قسمت‌ها برای اعمال استایل‌ها به المان‌های HTML است. با استفاده از این انتخابگرها، می‌توانیم به وسیلهٔ نام المان‌ها، ویژگی‌ها، و حتی ترکیبی از آن‌ها، المان‌های مورد نظر را استایل دهیم.

یک انتخابگر در CSS می‌تواند شامل یک نام المان، یک کلاس، یک آیدی، یک ویژگی، یک ویژگی ویژهٔ وضعیت، یک ویژگی ویژهٔ میانبر (pseudo-class)، یک ویژگی ویژهٔ متن (pseudo-element) و یا حتی ترکیبی از این‌ها باشد.

یک نام المان، مانند `p` یا `div`، به ما اجازه می‌دهد تا به همهٔ المان‌هایی که از آن‌ها استفاده می‌کنند استایل دهیم.

یک کلاس، مانند `.highlight`، به ما اجازه می‌دهد تا به همهٔ المان‌هایی که از این کلاس استفاده کرده‌اند استایل دهیم.

یک آیدی، مانند `#header`، به ما اجازه می‌دهد تا به یک المان خاص استایل دهیم. به دلیل یکتایی آیدی‌ها، از آیدی‌ها برای استایل دادن به المان‌های خاص استفاده می‌شود.

یک ویژگی، مانند `[type=”text”]`، به ما اجازه می‌دهد تا به المان‌هایی که دارای ویژگی مشخصی هستند استایل دهیم. می‌توانیم ویژگی‌ها را به شکل مقادیر، نام‌های ویژگی یا حتی با استفاده از عملگرهای مقایسه استفاده کنیم.

ویژگی ویژهٔ وضعیت، مانند `:hover`، به ما اجازه می‌دهد تا المان‌ها را در وضعیت‌های خاصی که کاربر با ماوس یا دیگر وسایل ورودی با المان تعامل دارد استایل دهیم. مثلاً وقتی کاربر موس را روی یک لینک می‌برد، می‌توانیم استایل متفاوتی به آن بدهیم.

ویژگی‌های ویژهٔ میانبر (pseudo-class)، مانند `:first-child` یا `:nth-child()`، به ما اجازه می‌دهد تا المان‌ها را بر اساس ویژگی‌های خاصی که در داخل المان‌ها وجود دارند استایل دهیم. مثلاً می‌توانیم المان‌هایی که اولین فرزند المان والد خود هستند استایل دهیم.

ویژگی‌های ویژهٔ متن (pseudo-element)، مانند `::before` یا `::after`، به ما اجازه می‌دهد تا المان‌ها را قبل یا بعد از متن داخل المان‌ها استایل دهیم. مثلاً می‌توانیم به یک المان استایلی اضافی قبل یا بعد از متن داخل آن بدهیم.

همچنین، می‌توانیم انتخابگرها را ترکیب کنیم تا به المان‌هایی که همزمان به چند شرط تطابق می‌کنند استایل دهیم. برای مثال، می‌توانیم المان‌هایی که هم نام دارند و همزمان دارای ویژگی خاصی هستند استایل دهیم.

استفاده صحیح از انتخابگرها در CSS می‌تواند به ما کمک کند تا استایل‌هایی منظم و قابل تکرار برای المان‌های مختلف داشته باشیم و کد CSS خود را ساده‌تر و قابل نگهداری‌تر کنیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *