شروع کار با انتخابگرها

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

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

 

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

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

دستور زیر تمام عناصر صفحه را هدف قرار داده و رنگ متن آبی را به عنوان استایل آنها قرار می دهد:

 

* {
  color: blue; 
}

 

از آنجا که این انتخابگر گستره وسیعی را در بر می گیرد باید در استفاده از آن بسیار دقیق باشیم تا از تاثیرات بد آن در امان بمانیم.

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

در مطالب بعدی خواهیم دید که این انتخابگر می تواند بسیار مفید نیز باشد.

 

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

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

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

 

a { /* لینک ها */ }

p { /* پاراگراف ها */ }

ul { /* لیست های غیر ترتیبی */ }

li { /* آیتم های لیست ها */ }

 

فرض کنید می خواهیم اندازه فونت تمام پاراگراف های یک صفحه را کمی بزرگ تر کنیم, کافی است بصورت زیر عمل کنیم:

 

p {
  font-size: 18px;
}

 

 

کلاس ها

در مثال بالا اگر بخواهیم گروه خاصی از پاراگراف ها را هدف قرار دهیم چه؟

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

 

<section>
  <p class="small-text"></p>
  <article>
    <p></p>
  </article>
</section>
<section>
  <p class="small-text"></p>
</section>
<p></p>

 

در اینجا تنها پاراگراف هایی که کلاس small-text را دارند هدف قرار می دهیم و نه تمام پاراگراف ها:

 

.small-text {
  font-size: 14px;
}

 

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

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

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

 

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

 

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

 

نکته دیگر اینکه یک عنصر می تواند چندین کلاس داشته باشد و هر کلاس می تواند وظیفه مخصوص به خود را به عهده بگیرد:

 

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

 

 

.info {
  /* استایل های مربوطه */
}

.info-large {
  font-size: 22px;
}

.info-center {
  text-align: center;
}

 

 

ID

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

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

 

<h1 id="test"></h1>

 

 

#test {
  background-color: orange;
}

 

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