آموزش سلکتورها در CSS

یک سلکتور یا گزینشگر، عناصری از HTML که می خواهیم آنها را استایل دهی کنیم، انتخاب می کند.

 سلکتور در CSS

از سلکتورهای CSS برای پیدا کردن (یا انتخاب کردن) عناصری از HTML که می خواهیم آنها را استایل دهی کنیم، استفاده می شود. ما می توانیم سلکتورهای CSS را به پنج دسته تقسیم کنیم:

1. سلکتورهای ساده(انتخاب عناصر بر اساس نام، id یا class)
2. سلکتورهای ترکیب کننده(انتخاب عناصر بر اساس یک رابطه ی خاص بین آنها)
3. سلکتورهای شبه کلاس(انتخاب عناصر بر اساس یک حالت خاص )
4. سلکتورهای شبه عنصر (انتخاب و استایل دهی به یک بخش از یک عنصر)
5. سلکتورهای خصوصیت(انتخاب عناصر بر اساس یک خصوصیت یا مقدار یک خصوصیت)

در این مقاله، اکثر سلکتورهای اصلی توضیح داده می شوند.

سلکتور عنصر در CSS

یک سلکتور عنصر، عناصر HTML را بر اساس نام آنها عنصر انتخاب می کند. 

p {
  text-align: center;
  color: red;
}

 سلکتور id در CSS

سلکتور id از خصوصیت id یک عنصر HTML برای انتخاب آن عنصر خاص استفاده می شود. id یک عنصر، باید در یک صفحه، یکتا باشد؛ بنابراین از سلکتور id برای انتخاب یک عنصر یکتا استفاده می شود. برای انتخاب(گزینش) یک عنصر با یک id خاص، یک علامت # را تایپ کنید و به دنبال آن، id عنصر را بنویسید:

#para1 {
  text-align: center;
  color: red;
}

نکته: یک id نمی تواند با یک عدد شروع شود.

سلکتور class در CSS

سلکتور class عناصری از HTML که از یک خصوصیت class خاص استفاده می کنند را انتخاب می کند.

برای انتخاب عناصر با یک کلاس خاص، ابتدا یک نقطه تایپ کنید و پس از آن، نام کلاس مورد نظر را تایپ کنید.

.center {
  text-align: center;
  color: red;
}

همچنین می توانیم مشخص کنیم که تنها، عناصر خاصی از HTML توسط یک کلاس تحت تاثیر قرار گیرند:

p.center {
  text-align: center;
  color: red;
}

عناصر HTML، همچنین می توانند از دو یا چند کلاس، نیز استفاده کنند.

<p class="center large">این پاراگراف از دو کلاس استفاده می کند</p> 

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

 سلکتور Universal یا سراسری در CSS

به علامت ستاره(*) در CSS، سلکتور سراسری(universal یا جهانی) گفته می شود. این سلکتور،  تمام عناصر روی صفحه را انتخاب می کند.

* {
  text-align: center;
  color: blue;
}

 گروه بندی سلکتورها در CSS

با گروه بندی سلکتورها، عناصر HTML با استایل های یکسانی گزینش می شوند. به کد CSS زیر توجه کنید(عناصر h1 و h2 و p استایل های یکسانی دارند):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

برای اینکه کدهای خود را کوتاه تر کنیم، بهتر است سلکتورهای بالا را گروه بندی کنیم. برای گروه بندی کردن سلکتورها، کافیست هر سلکتور را با علامت کاما(ویرگول) از یکدیگر جدا کنیم.

h1, h2, p {
  text-align: center;
  color: red;
}