آموزش CSS مبتدی : انتخابگرهای CSS پایه
قبلاً دیدهاید که چگونه در CSS، از انتخابگرها برای هدف قرار دادن عناصر HTML در صفحات وب خود که میخواهیم سبکدهی کنیم، استفاده میشود. طیف گستردهای از انتخابگرهای CSS در دسترس هستند که امکان دقت دقیق را در هنگام انتخاب عناصر برای سبکدهی فراهم میکنند و در چند مقاله بعدی، انواع مختلف را به طور عمیق بررسی خواهیم کرد. در این مقاله، برخی از اصول انتخابگر، از جمله انتخابگرهای نوع، کلاس و شناسه اولیه و لیستهای انتخابگر را مرور خواهیم کرد. همچنین انتخابگر جهانی را معرفی خواهیم کرد.
انتخابگر (selector) چیست؟
یک انتخابگر CSS اولین بخش از یک قانون CSS است. این الگو از عناصر و اصطلاحات دیگری است که به مرورگر میگوید کدام عناصر HTML باید مقادیر ویژگی CSS را در داخل قانون داشته باشند که روی آنها اعمال شود. عنصر یا عناصر انتخاب شده توسط انتخابگر، موضوع انتخابگر نامیده میشوند.
در مقالات قبلی، با انتخابگرهای مختلف آشنا شدید و یاد گرفتید که انتخابگرهایی وجود دارند که سند را به روشهای مختلفی هدف قرار میدهند؛ برای مثال، با انتخاب عنصری مانند h1 یا کلاسی مانند . بیایید با خلاصهای از موارد اصلی که قبلاً دیدهاید شروع کنیم.
یک انتخابگر نوع گاهی اوقات انتخابگر نام برچسب یا انتخابگر عنصر نامیده میشود زیرا یک برچسب/عنصر HTML را در سند شما انتخاب میکند. در مثال زیر، ما از انتخابگرهای span، em و strong استفاده کردهایم.
سعی کنید مثال زیر را در Playgroundویرایش کنید تا یک قانون CSS اضافه کنید که عنصر را انتخاب کرده و رنگ آن را به آبی تغییر دهد:
انتخابگر کلاس حساس به حروف بزرگ و کوچک با یک کاراکتر نقطه (.) شروع میشود. این انتخابگر هر چیزی را در سند که آن کلاس به آن اعمال شده باشد، انتخاب میکند. در مثال زنده زیر، ما یک کلاس به نام highlight ایجاد کردهایم و آن را در چندین جای سند اعمال کردهایم. تمام عناصر دارای آن کلاس هایلایت شدهاند.
هدف قرار دادن کلاسها روی عناصر خاص
شما میتوانید یک انتخابگر ایجاد کنید که عناصر خاصی را با کلاس اعمال شده هدف قرار دهد. در مثال بعدی، ما یک با کلاس highlight را متفاوت از یک عنوان با کلاس highlight هایلایت میکنیم. ما این کار را با استفاده از انتخابگر نوع برای عنصری که میخواهیم هدف قرار دهیم، با کلاسی که با یک نقطه اضافه شده است و بدون فاصله بین آنها، انجام میدهیم.
این رویکرد دامنه یک قانون را کاهش میدهد. این قانون فقط برای آن عنصر خاص و ترکیب کلاس اعمال میشود. اگر میخواهید این قانون برای عناصر دیگر اعمال شود، باید یک انتخابگر دیگر اضافه کنید.
انتخاب عنصری که بیش از یک کلاس دارد
شما میتوانید چندین کلاس را به یک عنصر اعمال کنید و آنها را به صورت جداگانه هدف قرار دهید، یا فقط عنصری را انتخاب کنید که همه کلاسهای موجود در انتخابگر وجود داشته باشند. این میتواند هنگام ساخت اجزایی که میتوانند به روشهای مختلف در سایت شما ترکیب شوند، مفید باشد.
در مثال زیر، ما یک داریم که حاوی یک یادداشت است. حاشیه خاکستری زمانی اعمال میشود که کادر دارای کلاس notebox باشد. اگر کلاس warning یا danger نیز داشته باشد، رنگ حاشیه را تغییر میدهیم.
ما میتوانیم با زنجیر کردن آنها به هم بدون هیچ فاصله سفیدی بین آنها، به مرورگر بگوییم که فقط میخواهیم عنصری را مطابقت دهیم که دو کلاس به آن اعمال شده باشد. خواهید دید که آخر هیچ سبکی اعمال نمیشود، زیرا فقط کلاس danger را دارد. برای اعمال هر سبکی، به کلاس notebox نیز نیاز دارد.
انتخابگر شناسه حساس به حروف بزرگ و کوچک به جای نقطه با علامت # شروع میشود، اما مانند انتخابگر کلاس استفاده میشود. تفاوت این است که یک شناسه فقط یک بار در هر صفحه قابل استفاده است و عناصر فقط میتوانند یک مقدار شناسه داشته باشند. انتخابگر شناسه، عنصری را با یک شناسه خاص انتخاب میکند و میتوانید قبل از شناسه، یک انتخابگر نوع قرار دهید تا فقط در صورتی عنصر را هدف قرار دهید که هم عنصر و هم شناسه با هم مطابقت داشته باشند. میتوانید هر دو کاربرد را در مثال زیر مشاهده کنید:
استفادهی چندین بار از یک شناسهی یکسان در یک سند ممکن است برای اهداف استایلدهی مناسب به نظر برسد، اما این کار را نکنید. این کار منجر به کد نامعتبر میشود و در بسیاری از قسمتها باعث بروز رفتارهای عجیب میشود.
اگر میخواهید CSS یکسانی را روی چندین مورد اعمال کنید، میتوانید انتخابگرهای جداگانه را در یک لیست انتخابگر ترکیب کنید. سپس این قانون روی همه انتخابگرهای جداگانه اعمال میشود. برای مثال، اگر من CSS یکسانی برای h1 و یک انتخابگر داشته باشم، میتوانم این را به صورت دو قانون جداگانه بنویسم.
همچنین میتوانم با اضافه کردن یک ویرگول بین آنها، اینها را در یک لیست انتخابگر ترکیب کنم.
فاصلهی خالی قبل یا بعد از ویرگول معتبر است. همچنین اگر هر کدام از انتخابگرها در یک خط جدید باشند، ممکن است خوانایی بیشتری داشته باشند.
در مثال زیر، سعی کنید دو انتخابگر را که تعاریف یکسانی دارند با هم ترکیب کنید. نمایش بصری پس از آن باید یکسان باشد.
انتخابگرهای نامعتبر در فهرستهای انتخابگر
وقتی انتخابگرها را به این روش گروهبندی میکنید، اگر هر انتخابگر از نظر نحوی نامعتبر باشد، کل قانون نادیده گرفته میشود.
در مثال زیر، قانون انتخابگر کلاس نامعتبر نادیده گرفته میشود، در حالی که h1 همچنان استایلبندی میشود.
با این حال، وقتی این دو با هم ترکیب شوند، نه h1 و نه کلاس استایلدهی نمیشوند زیرا کل قانون نامعتبر تلقی میشود.
انتخابگر سراسری با علامت ستاره (*) نشان داده میشود. این انتخابگر همه چیز را در سند انتخاب میکند. اگر * با استفاده از یک ترکیبکننده فرزند به صورت زنجیرهای باشد، همه چیز را در داخل آن عنصر جد انتخاب میکند. برای مثال، p * همه عناصر تو در تو را در داخل عنصر انتخاب میکند.
در مثال زیر، ما از انتخابگر سراسری برای حذف حاشیهها در همه عناصر استفاده میکنیم. به جای سبک پیشفرض مرورگر که بین سرتیترها و پاراگرافها با حاشیه فاصله میگذارد، همه چیز به هم نزدیک است.
این نوع رفتار گاهی اوقات در "reset stylesheets" دیده میشود، که تمام استایلبندی مرورگر را حذف میکند. از آنجایی که انتخابگر سراسری تغییرات سراسری ایجاد میکند، ما از آن برای موقعیتهای بسیار خاص، مانند موردی که در زیر توضیح داده شده است، استفاده میکنیم.
استفاده از انتخابگر سراسری برای خواناتر کردن انتخابگرهایتان
یکی از کاربردهای انتخابگر سراسری، خوانایی آسانتر و شهودیتر کردن انتخابگرها است. برای مثال، اگر میخواستیم تمام عناصر نسل یک عنصر را که فرزند اول والد خود هستند، از جمله فرزندان مستقیم، انتخاب کنیم، میتوانستیم از شبه کلاس استفاده کنیم. در مورد این موضوع در شبه کلاسها و شبه عناصر بیشتر خواهیم آموخت:
با این حال، این انتخابگر میتواند با اشتباه گرفته شود، که هر عنصر را که فرزند اول عنصر دیگری باشد انتخاب میکند.
برای جلوگیری از این سردرگمی، میتوانیم انتخابگر جهانی را به شبه کلاس اضافه کنیم، بنابراین واضحتر میشود که انتخابگر چه کاری انجام میدهد. این انتخابگر هر عنصری را که فرزند اول یک عنصر یا فرزند اول هر عنصر مشتق از باشد، انتخاب میکند:
هر دو معادل هستند، اما برخی افراد گزینه دوم را آسانتر میفهمند.
