انتخابگرها (Selectors)

آشنایی با انواع انتخابگرهای CSS: عنصر، کلاس، ID، گروه‌بندی و انتخابگرهای پیشرفته

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

انتخابگر (Selector) بخشی از قانون CSS است که مشخص می‌کند کدام عنصر(های) HTML باید استایل شوند. به‌عبارت ساده: انتخابگر می‌گوید «این استایل را روی چه چیزی اعمال کن.»

/* p یک انتخابگر است */
    p {
        color: red;
    }

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

CSS پنج دسته اصلی انتخابگر دارد:

دستهتوضیحمثال
انتخابگر سادهبر اساس نام عنصر، کلاس یا IDp، .btn، #header
انتخابگر ترکیب‌کنندهبر اساس رابطه بین عناصرdiv p، ul > li
شبه‌کلاسبر اساس وضعیت خاصa:hover، li:first-child
شبه‌عنصربر اساس بخشی از عنصرp::first-line
انتخابگر ویژگیبر اساس صفات HTML[type="text"]

۱. انتخابگر عنصر (Element Selector)

با نام تگ HTML، تمام آن عناصر را انتخاب می‌کند:

/* تمام پاراگراف‌ها */
    p {
        color: #333;
        line-height: 1.6;
    }
    
    /* تمام لینک‌ها */
    a {
        text-decoration: none;
    }
    
    /* تمام تصاویر */
    img {
        max-width: 100%;
    }

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

با نقطه . شروع می‌شود و عناصری که آن کلاس را دارند انتخاب می‌کند. یک کلاس می‌تواند روی چندین عنصر اعمال شود:

/* در HTML */
    <p class="highlight">متن هایلایت</p>
    <div class="highlight">دیف هایلایت</div>
    
    /* در CSS */
    .highlight {
        background-color: yellow;
        padding: 5px;
    }

چند کلاس روی یک عنصر

یک عنصر می‌تواند چند کلاس داشته باشد — با فاصله جدا می‌شوند:

<div class="box important">متن</div>
    
    .box {
        border: 1px solid #ccc;
        padding: 10px;
    }
    
    .important {
        color: red;
        font-weight: bold;
    }

۳. انتخابگر ID

با علامت # شروع می‌شود و فقط یک عنصر خاص را انتخاب می‌کند. هر ID باید در صفحه یکتا باشد:

/* در HTML */
    <header id="main-header">عنوان سایت</header>
    
    /* در CSS */
    #main-header {
        background: #2c3e50;
        color: white;
        padding: 20px;
    }

تفاوت Class و ID

ویژگیClassID
علامت.#
تعداد استفادهنامحدودفقط یک‌بار در صفحه
اولویت (Specificity)پایینبالا
کاربرد اصلیاستایل‌دهیJavaScript و لنگر (Anchor)

۴. انتخابگر جهانی (Universal)

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

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

۵. گروه‌بندی انتخابگرها

می‌توان چند انتخابگر را با کاما , گروه‌بندی کرد تا یک استایل مشترک بگیرند:

/* هر سه عنوان یک استایل دارند */
    h1, h2, h3 {
        color: #333;
        font-family: Tahoma, sans-serif;
    }
    
    /* چند کلاس */
    .btn, .link, .tab {
        cursor: pointer;
        transition: 0.3s;
    }

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

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

/* فقط پاراگراف‌هایی که کلاس highlight دارند */
    p.highlight {
        background: yellow;
    }
    
    /* فقط div ای که ID آن است header */
    div#header {
        background: #333;
    }

۶. انتخابگرهای نوادگی (Descendant)

با فاصله بین انتخابگرها، نوادگان یک عنصر را انتخاب می‌کند:

/* تمام p‌های داخل article */
    article p {
        color: #555;
    }
    
    /* تمام a‌های داخل nav */
    nav a {
        color: blue;
    }

انتخابگر فرزند مستقیم (Child)

با علامت > فقط فرزندان مستقیم را انتخاب می‌کند:

/* فقط li‌های مستقیمِ ul */
    ul > li {
        list-style: none;
    }

جدول کامل انتخابگرهای ساده

انتخابگرمثالتوضیح
**تمام عناصر
عنصرpتمام پاراگراف‌ها
کلاس.btnعناصر با کلاس btn
ID#headerعنصر با ID header
گروهh1, h2هر دو عنصر
ترکیبیp.highlightp با کلاس highlight

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

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط