آموزش Selectorهای id و class

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

انتخابگرهای CSS به شما این امکان را می‌دهند که المان‌های HTML را شناسایی کرده و استایل‌های خاصی را برای آن‌ها اعمال کنید. با استفاده از این انتخابگرها می‌توانید بر اساس شناسه (ID)، کلاس (Class)، نوع المان یا خصیصه (attribute)، عناصر موردنظر را پیدا و دستکاری کنید.

انواع Selectorها در CSS

1. انتخابگر المان (Element Selector)

این انتخابگر بر اساس نام المان HTML، تمام نمونه‌های آن را انتخاب می‌کند. در مثال زیر تمامی المان‌های < p > وسط‌چین شده و رنگ متن آن‌ها قرمز می‌شود.

    p {
        text-align: center;
        color: red;
    }    

2. انتخابگر شناسه (ID Selector)

انتخابگر ID با استفاده از خصیصه id، یک المان منحصربه‌فرد را انتخاب می‌کند. برای استفاده از این انتخابگر، از علامت # قبل از نام شناسه استفاده می‌شود.در این مثال، المانی که دارای شناسه para1 باشد، وسط‌چین و سبز خواهد شد.

    #para1 {
        text-align: center;
        color: green;
    }    

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

انتخابگر کلاس با خصیصه class مشخص می‌شود. برای استفاده، باید از . قبل از نام کلاس استفاده کنید.تمامی المان‌های دارای کلاس center در مثال زیر وسط‌چین شده و رنگ آن‌ها قرمز خواهد بود.

    .center {
        text-align: center;
        color: red;
    }    

4. اعمال کلاس برای نوع خاصی از المان‌ها

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

با کلاس center در مثال زیر وسط‌چین و قرمز خواهند شد.

    p.center {
        text-align: center;
        color: red;
    }    

5. گروه‌بندی انتخابگرها (Grouping Selectors)

برای کاهش حجم کد و گروه‌بندی چند انتخابگر با استایل یکسان، می‌توانید از ویرگول , برای جدا کردن انتخابگرها استفاده کنید.در مثال زیر ، تمامی المان‌های < h1 >، < h2 > و < p > وسط‌چین شده و رنگ آن‌ها قرمز خواهد بود.

    h1, h2, p {
        text-align: center;
        color: red;
    }