فصل سیزدهم: آموزش انتخابگرها (Selectors) پیشرفته در CSS

اموزش رایگان CSS

(Advanced CSS Selectors)

در فصل‌های قبلی با انتخابگرهای ساده (مثل انتخاب تگ، کلاس یا آیدی) آشنا شدی. حالا وقتشه با انتخابگرهای پیشرفته‌تر آشنا شویم؛ این‌ها بهت قدرت خیلی بیشتری می‌دهند تا فقط همان چیز را که می‌خواهی، دقیق انتخاب و استایل دهی.

۱. انتخابگر گروهی (Group Selector)

کاربرد: زمانی‌که چند عنصر باید دقیقاً یه استایل داشته باشن.

h1, h2, h3, .title, #top {
  color: #1976d2;
}
  • هرجا یکی از این‌ها باشه، متنش آبی میشه — چه با تگ، چه با کلاس یا آیدی!

۲. انتخابگر فرزند مستقیم (Child Selector: >)

کاربرد: فقط فرزند مستقیم رو انتخاب می‌کنه، نه فرزندِ فرزند!

ul > li {
  color: green;
}

مثال HTML:

<ul>
  <li>یک</li>
  <li>
    <ul><li>زیرلیست</li></ul>
  </li>
</ul>
  • فقط li مستقیم اول و دوم سبز میشه، زیرلیست نه!

۳. انتخابگر نسل (Descendant Selector: فاصله)

کاربرد: هرچی درون یه عنصر باشه، حتی عمیق‌تر.

div p {
  font-size: 18px;
}
  • هر پاراگرافی که جایی داخل div هست، بزرگ میشه.

۴. انتخابگر وضعیت (Pseudo Classes)

کاربرد: وقتی یک عنصر تو یه حالت خاص قرار بگیره.

  • مثال hover:
a:hover {
  color: red;
}

روی لینک موس رو ببر، قرمز میشه.

  • مثال focus:
input:focus {
  border: 2px solid blue;
}

روی input کلیک کنی (یا با تب فعال شه)، کادرش آبی میشه.

  • مثال انتخاب اولین و آخرین آیتم:
li:first-child { background: #f1c40f; }
li:last-child { font-weight: bold; }
li:nth-child(2) { color: rosybrown; }
/* آیتم دوم فقط */

۵. انتخابگر قبل و بعد (Pseudo Elements)

کاربرد: برای استایل دادن به بخشی از متن یا اضافه کردن چیزی به عنصر، بدون تغییر HTML!

  • ::before مثلا برای اضافه کردن یک آیکن:
li::before {
  content: "🔥 ";
  color: orange;
}

شعله کنار همه li ها میاد.

  • ::after مثلا برای نمایش واحد پول:
.price::after {
  content: " تومان";
  color: #2e7d32;
}

کنار همه قیمت‌ها “تومان” اضافه میشه.

  • ::first-letter / ::first-line:
p::first-letter { font-size: 200%; color: #42a5f5;}

فقط حرف اول پاراگراف بزرگ و رنگی میشه.

۶. انتخابگر ویژگی یا Attribute Selector

کاربرد: موقعی که می‌خوای بر پایه ویژگی HTML انتخاب کنی.

  • هر input که type=”password”:
input[type="password"] {
  background: #fce4ec;
  border: 2px dashed crimson;
}
  • لینک‌هایی که target=”_blank”:
a[target="_blank"] {
  padding-right: 16px;
  background: url("icon.svg") right center/16px auto no-repeat;
}

۷. انتخابگر برادر (Sibling Selector)

دو نوع مهم داره:

+ (Adjacent Sibling)

فقط همسایه بلافاصله بعدش:

h2 + p {
  color: teal;
}
  • فقط پاراگرافی که “بلافاصله” بعد از h2 باشه.

~ (General Sibling)

همه همسطح‌های بعدی، نه فقط اولی:

h2 ~ p {
  color: #ff9800;
}
  • همه پاراگراف‌هایی که بعد از h2 (همسطح) می‌آیند.

۸. انتخابگر nth-child و nth-of-type

برای انتخاب آیتم‌های خاص براساس شماره:

ul li:nth-child(3) {
  color: purple;
}
ul li:nth-child(even) {
  font-style: italic;
}
ul li:nth-child(odd) {
  font-style: normal;
}
  • even = زوج، odd = فرد

۹. ترکیب انتخابگرها

مثال: همه input[type=”text”] که موقع focus گرفتن، پس‌زمینه‌شون آبی شه:

input[type="text"]:focus {
  background: #e3f2fd;
}

تمرین‌های بیشتر

۱. یک لیست درست کن که فقط آیتم اول آیکون قلب داشته باشه (با ::before).
۲. همه لینک‌هایی که target=”_blank” دارند، سبز کن.
۳. هر li که سومین فرزند هست، بک‌گراند خاکستری بده.
۴. یک پاراگراف بساز و با ::first-letter فقط اولین حرف رو خیلی بزرگ کن.

جمع‌بندی

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

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *