جلسه بعد ❯❮ جلسه قبل

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

Selector ها را در CSS می توان به 5 دست کلی تقسیم کرد:

  • انتخاب کننده های (Selectors) ساده (انتخاب عناصر بر اساس نام، id و یا کلاس (Class))
  • انتخاب کننده های (Selectors) ترکیبی (انتخاب عناصر بر اساس یک رابطه خاص بین آن ها انتخاب کنید)
  • انتخاب کننده های (Selectors) شبه Class (انتخاب عناصر بر اساس یک وضعیت خاص انتخاب کنید)
  • انتخاب کننده های (Selectors) شبه عنصر (انتخاب بخشی از عنصر و دادن استایل به آن)
  • انتخاب کننده های (Selectors) صفت (انتخاب صفت (attributes) یک عنصر و دادن استایل به آن)

در این قسمت از آموزش CSS دسته اول یعنی انتخاب کننده ها (Selectors) ساده بررسی می شوند و دسته های دیگر در فصل های بعدی به صورت کامل آموزش داده خواهند شد.

انتخاب کننده ی عنصر در CSS

این انتخاب کننده (Selector)، عنصر HTML را بر اساس نام آن عنصر انتخاب و پیدا می کند.

مثال

در مثال زیر همه ی عناصر <p> در وسط صفحه قرار می گیرند و رنگ متن شان قرمز می شود: 

p {
  text-align: center;
  color: red;
}
خودتان امتحان کنید »

انتخاب کننده ی id 

انتخاب کننده ی id، از صفت id یک عنصر برای انتخاب یک عنصر خاص استفاده می کند.

id یک عنصر در یک صفحه منحصر به فرد است، بنابراین از انتخاب کننده ی id تنها برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

برای انتخاب یک عنصر یا یک id خاص، در ابتدای Selector علامت هشتگ (#) را قرار داده و به دنبال آن id عنصر را می نویسیم.

مثال

استایل CSS زیر فقط بر روی عنصری با شناسه "id="para1 اعمال می شود:

#para1 {
  text-align: center;
  color: red;
}
خودتان امتحان کنید »

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

انتخاب کننده ی Class

انتخاب کننده ی Class، یک عنصر با یک صفت class خاص را انتخاب می کند.

برای انتخاب یک عنصر یا یک class خاص، در ابتدای Selector علامت نقطه (.) را قرار داده و به دنبال آن class عنصر را می نویسیم.

مثال

استایل زیر بر روی همه ی عناصر با کلاس "class="center اعمال میشود: 

.center {
  text-align: center;
  color: red;
}
خودتان امتحان کنید »

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

مثال

استایل CSS در این مثال فقط بر روی عناصر <p> دارای کلاس "class="center اعمال می شود: 

p.center {
  text-align: center;
  color: red;
}
خودتان امتحان کنید »

همچنین عناصر HTML می توانند چندین مقدار برای صفت class داشته باشند.

مثال

در این مثال عنصر <p> توسط هر دو کلاس center و large استایل دهی می شود: 

<p class="center large">This paragraph refers to two classes.</p>
خودتان امتحان کنید »

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

انتخاب کننده همگانی

انتخاب کننده (*) استایل مد نظر شما را روی همه ی عناصر HTML در یک صفحه اعمال می کند.

مثال

استایل CSS زیر روی هر عنصر موجود در صفحه تاثیر می گذارد: 

* {
  text-align: center;
  color: blue;
}
خودتان امتحان کنید »

انتخاب کننده های گروهی

انتخاب کننده های گروهی برای تعریف عناصر 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;
}
خودتان امتحان کنید »

منبع

https://www.w3schools.com/css/css_selectors.asp

جلسه بعد ❯❮ جلسه قبل