درس سوم- انتخابگرها(Selectors) در css قسمت اول

دز این درس راجع به انتخابگرها صحبت میکنیم.

انتخابگرها مهمترین بخش css  هستن و به کمک اونها میتونیم از تمام قدرت css استفاده کنیم. انتخابگر الگویی است که به وسیله آنهایک عنصر یا عناصر HTML را انتخاب کنیم تا بتوانیم استایل های مورد نظر را بر روی آن (ها) اعمال کنیم. به عبارت دیگر توسط انتخابگرهای css یک یا چند عنصر HTML را هدف قرار می دهیم.

در ادامه با انواع انتخابگرها بصورت کامل و قدم به قدم آشنا خواهیم شد.

انتخابگر سراسری (Universal)

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

برای مثال قطعه کد زیر تمام عناصر موجود در صفحه را نتخاب میکند و رنگ متن آنها را زرد و اندازه فونتشان را 14px تنظیم میکند؛

*{
  color: yellow;
  font-size: 14px;
}

در استفاده از این نوع انتخابگر باید خیلی دقت کرد چرا که گستره آن شامل تمام تگهای HTML می شود و از طرفی باعث می شود یکی از مفاهیم اصلی Css یعنی وراثت دیگر عملی نباشد. و وقتی ما وراثت را از دست بدهیم مجبور خواهیم شد که تمام استایلهایی که توسط انتخابگر نوشتیم (بخوانید از بین بردیم) را در صورت نیاز برای تمام   فرزندان بازنویسی کنیم. با تمام این تفاسیر در ادامه خواهیم دید که این انتخاب گر می تواند بسیار سودمند هم باشد به شرطی که به درستی از آن استفاده کنیم.

انتخابگر نوع (Type)

توسط این انتخابگر می توانیم عناصر HTML را از طریق نام تگ آنها انتخاب کنیم.به این انتخابگر, انتخابگر عنصر یا انتخابگر تگ هم می گویند.

نحوه استفاده از این انتخابگر خیلی ساده است, کافی است نام تگ عنصر HTML را بنویسیم و تمام آن نوع از عناصر انتخاب می شوند در مثال زیر به ترتیب ما تمام پارگراف ها، لینک ها، لیستها و آیتم لیست ها را انتخاب کردیم:

p { /* پارگراف ها */ }
a { /* لینک ها */ }
ul { /* لیست های غیر ترتیبی */ }
li { /* آیتم های لیست ها */ }

کلاس ها

در مثال قبلی اگر بخواهیم گروه خاصی از لینکها را هدف قرار دهیم (مثلا فقط لینکهایی که در فوتر سایت هستند) چه؟

می توانیم برای یک عنصر در HTML ویژگی به نام Class تعریف کنیم و بوسیله . به عناصری که دارای آن کلاس هستند در CSS دسترسی داشته باشیم.

فرض کنیم قصد داریم تنها پاراگراف هایی که عنوان مقاله را مشخص میکنند را با رنگ آبی و فونت درشت تر نشان دهیم به آنها کلاس article-title را اختصاص داده و به کمک نام کلاس  فقط آنها را هدف قرار می دهیم و نه تمام پاراگراف ها:

.article-title {
font-weight: 600;
color: blue;
}

کلاس ها رایج ترین  و بهترین نوع انتخابگرها هستند.

اما توجه داشته باشید نام کلاس نمی تواند با عدد شروع شود.

<p class="2small-text"></p> <!-- غلط و نامعتبر -->

توجه داشته باشید که کلاس ها را می توانند هم زمان به چند نوع عنصر مختلف اختصاص داد و حتما نیاز نیست یک کلاس را فقط به یک نوع عنصر بدهیم. نمونه زیر را ببینید:

<p class="note"></p>
<span class="note"></span>
<div>
<a href="" class="note"></a>
</div>

نکته دیگر اینکه یک عنصر می تواند چندین کلاس داشته باشد و هر کلاس می تواند کار خاصی انجام دهد فریمورکهای مربوط به css از همین قابلیت در اوسعه خود استفاده می کنند:

<p class="alert alert-info alert-center"></p>

استایلهای مربوطه

.alert {
background-color: #fff;
border-radius:25px;
/* استایل های مربوطه */
}
.alert-info {
background-color: lightblue;
}
.alert-center {
text-align: center;
}

ID

دیگر ویژگی که می توان برای یک عنصر HTML تعریف کرد  id می باشد. id بر خلاف کلاسها یک ویژگی یکتا می باشد و منحصر به یک عنصر HTML خواهد بود. مانند کد ملی  یکتا است هر عنصر در صفحه می تواند id یکتا داشته باشد و با آن id عنصر دیگری نباید وجود داشته باشد.

در CSS بوسیله # می توانیم از طریق ویژگی id  عنصر, آن را هدف قرار دهیم:

#test {
background-color: orange;
}

به صورت کلی توصیه می شود سعی کنید از id  برای اعمال استایل (CSS  ) استفاده نکنید و بجای آنها از کلاس ها بهره ببرید. از id برای کار با Javascript استفاده می شود.

منابع:

freeCOdeCamp | css-tricks.ir | w3school.com