CSS

۱۲ تیر ۱۴۰۵

راهنمای کامل انتخابگرها در CSS (همه انواع)

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

انواع انتخابگرهای CSS و نحوه استفاده از آنها

انتخابگر چیست؟

انتخابگر CSS الگویی برای تطبیق عناصر HTML است. قوانین سبک به عناصری اعمال می‌شود که با الگوی انتخابگر مطابقت دارند. انتخابگرها برای انتخاب عناصر صفحه و اعمال استایل استفاده می‌شوند.

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

۱. انتخابگر عمومی (Universal Selector)

نماد: *
همه عناصر صفحه را انتخاب می‌کند.

* {
  margin: 0;
  padding: 0;
}

هشدار: فشار زیاد به مرورگر، توصیه نمی‌شود.

۲. انتخابگر نوع عنصر (Type Selector)

نام عنصر (مثل p, h1).

p {
  color: blue;
}

همه تگ‌های <p> را انتخاب می‌کند.

۳. انتخابگر ID (ID Selector)

نماد: # + نام ID.
فقط یک عنصر منحصربه‌فرد.

#error {
  color: red;
}

برای <div id="error"> اعمال می‌شود.

۴. انتخابگر کلاس (Class Selector)

نماد: . + نام کلاس.
همه عناصر با کلاس مشابه.

.blue {
  color: blue;
}
p.blue {
  color: blue;  /* فقط پاراگراف‌های کلاس blue */
}

۵. انتخابگرهای نسل (Descendant Selector)

فضا ( ) بین انتخابگرها.
همه فرزندان (مستقیم/غیرمستقیم).

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

۶. انتخابگر فرزند (Child Selector)

نماد: >
فقط فرزندان مستقیم.

ul > li {
  list-style: square;
}

۷. انتخابگر هم‌نوع مجاور (Adjacent Sibling Selector)

نماد: +
عنصر مجاور بلافاصله بعد.

h1 + p {
  color: blue;
  font-size: 18px;
}

انتخابگر h1+p در مثال بالا عناصر <p> را تنها در صورتی انتخاب می کند که هر دو عناصر <h1> و <p> والدین یکسانی در درخت سند داشته باشند و <h1> بدون فاصله قبل از عنصر <p> باشد.

۸. انتخابگر هم‌نوع عمومی (General Sibling Selector)

نماد: ~
همه هم‌نوع‌ها بعد از عنصر.

h1 ~ p {
  color: blue;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}

انتخابگر h1 ∼ p در مثال بالا، تمام عناصر <p> را انتخاب می کند که بعد از عنصر <h1> آمده اند، در حالیکه والدین همه عناصر در درخت سند یکی است.

انتخابگرهای گروهی (Grouped Selectors)

کاما (,) برای گروه‌بندی و جلوگیری از تکرار.

h1, h2, h3 {
  font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

برچسب‌ها: CSS, انتخابگرها, Selector.

انتخابگر چیست؟

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

۱. انتخابگر عمومی (Universal Selector)

نماد: *
همه عناصر صفحه را انتخاب می‌کند.

* {
  margin: 0;
  padding: 0;
}

هشدار: فشار زیاد به مرورگر، توصیه نمی‌شود.

۲. انتخابگر نوع عنصر (Type Selector)

نام عنصر (مثل p, h1).

p {
  color: blue;
}

همه تگ‌های <p> را انتخاب می‌کند.

۳. انتخابگر ID (ID Selector)

نماد: # + نام ID.
فقط یک عنصر منحصربه‌فرد.

#error {
  color: red;
}

برای <div id="error"> اعمال می‌شود.

۴. انتخابگر کلاس (Class Selector)

نماد: . + نام کلاس.
همه عناصر با کلاس مشابه.

.blue {
  color: blue;
}
p.blue {
  color: blue;  /* فقط پاراگراف‌های کلاس blue */
}

۵. انتخابگرهای نسل (Descendant Selector)

فضا ( ) بین انتخابگرها.
همه فرزندان (مستقیم/غیرمستقیم).

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

۶. انتخابگر فرزند (Child Selector)

نماد: >
فقط فرزندان مستقیم.

ul > li {
  list-style: square;
}

۷. انتخابگر هم‌نوع مجاور (Adjacent Sibling Selector)

نماد: +
عنصر مجاور بلافاصله بعد.

h1 + p {
  color: blue;
  font-size: 18px;
}

۸. انتخابگر هم‌نوع عمومی (General Sibling Selector)

نماد: ~
همه هم‌نوع‌ها بعد از عنصر.

h1 ~ p {
  color: blue;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}

انتخابگرهای گروهی (Grouped Selectors)

کاما (,) برای گروه‌بندی و جلوگیری از تکرار.

h1, h2, h3 {
  font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

برچسب‌ها: CSS, انتخابگرها, Selector.

پیشنهاد بعدی

مطالعه بیشتر

مطالب مرتبط

آموزش گام‌به‌گام CSS – از مبتدی تا پیشرفته

CSS ابزار جدایی‌ناپذیر طراحی وب است که با جدا کردن سبک از محتوا، کدهای تمیزتر، صفحات سریع‌تر و مدیریت ساده‌تری برای وب‌سایت شما به ارمغان می‌آورد.

۳۱ تیر ۱۴۰۵4 دقیقه مطالعه

روش‌های افزودن CSS به HTML (داخلی، خارجی و خطی)

سه روش اصلی برای اضافه کردن CSS به HTML شامل استایل‌های خطی، داخلی و خارجی وجود دارد که هرکدام مزایا و کاربردهای خاص خود را دارند.

۱۲ تیر ۱۴۰۵4 دقیقه مطالعه

ویژگی‌های پس‌زمینه در CSS (رنگ، تصویر، تکرار و موقعیت)

ویژگی‌های پس‌زمینه شامل رنگ، تصویر، نحوه تکرار، موقعیت و حالت چسبندگی است که با استفاده از آنها می‌توان ظاهر جذابی برای عناصر ایجاد کرد.

۱۲ تیر ۱۴۰۵4 دقیقه مطالعه

MiPiBoy

Loading...

آماده‌سازی تجربه0%

انواع انتخابگرهای CSS و نحوه استفاده از آنها

انتخابگر چیست؟

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

۱. انتخابگر عمومی (Universal Selector)

نماد: *
همه عناصر صفحه را انتخاب می‌کند.

* {
  margin: 0;
  padding: 0;
}

هشدار: فشار زیاد به مرورگر، توصیه نمی‌شود.

۲. انتخابگر نوع عنصر (Type Selector)

نام عنصر (مثل p, h1).

p {
  color: blue;
}

همه تگ‌های <p> را انتخاب می‌کند.

۳. انتخابگر ID (ID Selector)

نماد: # + نام ID.
فقط یک عنصر منحصربه‌فرد.

#error {
  color: red;
}

برای <div id="error"> اعمال می‌شود.

۴. انتخابگر کلاس (Class Selector)

نماد: . + نام کلاس.
همه عناصر با کلاس مشابه.

.blue {
  color: blue;
}
p.blue {
  color: blue;  /* فقط پاراگراف‌های کلاس blue */
}

۵. انتخابگرهای نسل (Descendant Selector)

فضا ( ) بین انتخابگرها.
همه فرزندان (مستقیم/غیرمستقیم).

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

۶. انتخابگر فرزند (Child Selector)

نماد: >
فقط فرزندان مستقیم.

ul > li {
  list-style: square;
}

۷. انتخابگر هم‌نوع مجاور (Adjacent Sibling Selector)

نماد: +
عنصر مجاور بلافاصله بعد.

h1 + p {
  color: blue;
  font-size: 18px;
}

۸. انتخابگر هم‌نوع عمومی (General Sibling Selector)

نماد: ~
همه هم‌نوع‌ها بعد از عنصر.

h1 ~ p {
  color: blue;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}

انتخابگرهای گروهی (Grouped Selectors)

کاما (,) برای گروه‌بندی و جلوگیری از تکرار.

h1, h2, h3 {
  font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

برچسب‌ها: CSS, انتخابگرها, Selector.

انتخابگر چیست؟

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

۱. انتخابگر عمومی (Universal Selector)

نماد: *
همه عناصر صفحه را انتخاب می‌کند.

* {
  margin: 0;
  padding: 0;
}

هشدار: فشار زیاد به مرورگر، توصیه نمی‌شود.

۲. انتخابگر نوع عنصر (Type Selector)

نام عنصر (مثل p, h1).

p {
  color: blue;
}

همه تگ‌های <p> را انتخاب می‌کند.

۳. انتخابگر ID (ID Selector)

نماد: # + نام ID.
فقط یک عنصر منحصربه‌فرد.

#error {
  color: red;
}

برای <div id="error"> اعمال می‌شود.

۴. انتخابگر کلاس (Class Selector)

نماد: . + نام کلاس.
همه عناصر با کلاس مشابه.

.blue {
  color: blue;
}
p.blue {
  color: blue;  /* فقط پاراگراف‌های کلاس blue */
}

۵. انتخابگرهای نسل (Descendant Selector)

فضا ( ) بین انتخابگرها.
همه فرزندان (مستقیم/غیرمستقیم).

ul.menu li a {
  text-decoration: none;
}
h1 em {
  color: green;
}

۶. انتخابگر فرزند (Child Selector)

نماد: >
فقط فرزندان مستقیم.

ul > li {
  list-style: square;
}

۷. انتخابگر هم‌نوع مجاور (Adjacent Sibling Selector)

نماد: +
عنصر مجاور بلافاصله بعد.

h1 + p {
  color: blue;
  font-size: 18px;
}

۸. انتخابگر هم‌نوع عمومی (General Sibling Selector)

نماد: ~
همه هم‌نوع‌ها بعد از عنصر.

h1 ~ p {
  color: blue;
}
ul.task ~ p {
  color: #f0f;
  text-indent: 30px;
}

انتخابگرهای گروهی (Grouped Selectors)

کاما (,) برای گروه‌بندی و جلوگیری از تکرار.

h1, h2, h3 {
  font-weight: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

برچسب‌ها: CSS, انتخابگرها, Selector.