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

🛠️ انواع سلکتورها در CSS

1. سلکتورهای ساده (Simple Selectors)

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

p { color: red; }        /* بر اساس نام تگ */
.card { background: black; }   /* بر اساس کلاس */
#first { font-size: 1rem; }    /* بر اساس آی‌دی */

2. سلکتورهای ترکیبی (Combinator Selectors)

انتخاب بر اساس رابطه بین عناصر.
چهار نوع اصلی:

Descendant (فضا) – انتخاب همه فرزندان در هر سطحی:

div a { color: red; }

Child (>) – فقط فرزند مستقیم:

div > a { color: red; }

Adjacent Sibling (+) – فقط اولین همزاد مجاور:

div + a { color: red; }

General Sibling (~) – همه همزادهای هم‌سطح:

div ~ a { color: red; }

3. سلکتورهای شبه‌کلاس (Pseudo-classes)

انتخاب عنصر بر اساس وضعیت پویا یا حالت خاص.

a:hover { color: red; }
a:visited { color: yellow; }

🔹 برخی شبه‌کلاس‌های مهم:

:hover
:active
:focus
:checked
:first-child
:last-child
:nth-child(n)
:target

4. سلکتورهای شبه‌عنصر (Pseudo-elements)

انتخاب بخشی از یک عنصر برای استایل‌دهی.

p::first-line { color: blue; }
p::first-letter { font-size: 2rem; }
a::before { content: "👉 "; }

🔹 مهم‌ترین شبه‌عنصرها:

::first-line
::first-letter
::before
::after
::selection
::placeholder

5. سلکتورهای صفات (Attribute Selectors)

انتخاب بر اساس ویژگی (attribute) عنصر.

بر اساس وجود یک ویژگی:

a[target] { color: pink; }

بر اساس مقدار دقیق ویژگی:

a[target="_blank"] { color: pink; }

مقدار شامل کلمه خاص (~=):

p[data-type~="home"] { color: green; }

مقدار شروع با کلمه خاص (|=):

a[class|="navLink"] { color: pink; }

مقدار شروع با عبارت خاص (^=):

a[class^="nav"] { color: pink; }

مقدار پایان با عبارت خاص ($=):

a[class$="Link"] { color: pink; }

مقدار شامل عبارت خاص (*=):

a[class*="Li"] { color: pink; }

6. سلکتور سراسری (Universal Selector)

انتخاب همه عناصر در صفحه:

* {
  margin: 0;
  padding: 0;
}

7. سلکتور گروهی (Grouping Selector)

اعمال استایل یکسان روی چند عنصر با کاما (,)

p, h6 {
  font-size: 1rem;
}

📌 نتیجه‌گیری

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