لیست سِلکتورهای CSS

مقدمه‌ای درباره سِلکتورهای CSS

سلام دوستای عزیز! امروز می‌خواهیم درباره سِلکتورهای مختلف CSS صحبت کنیم. سِلکتورها ابزارهایی هستند که به ما کمک می‌کنند تا استایل‌های مختلف را به عناصر HTML خود اعمال کنیم. به عبارت ساده، سِلکتور‌ها تعیین می‌کنند کد CSS ما برای کدام عناصر HTML اجرا می‌شود. برای مثال، اگر بخواهیم رنگ متن یک برچسب خاص را تغییر دهیم، از سِلکتور استفاده می‌کنیم تا آن برچسب را شناسایی کنیم.

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

یکی از موارد جالب در مورد سِلکتورها این است که شما می‌توانید از ترکیب آن‌ها برای ایجاد استایل‌های پیچیده‌تر استفاده کنید. به عنوان مثال، می‌توانید بگویید که فقط دکمه‌های داخل یک بخش خاص را تغییر دهید. این نوع انتخاب‌های دقیق جداً به شما کمک می‌کند تا کنترل بیشتری روی استایل‌های صفحه‌تان داشته باشید.

به همین خاطر، یادگیری سِلکتورهای مختلف CSS جزء مهمی از یادگیری طراحی وب است. حالا بیایید با هم نگاهی به چند نمونه از سِلکتورهای محبوب و پرکاربرد CSS بیاندازیم و نحوه استفاده از آن‌ها را بررسی کنیم!

نمونه سِلکتورهای CSS

/* سِلکتور نوع */
h1 {
    color: blue;
}

/* سِلکتور کلاس */
.button {
    background-color: green;
}

/* سِلکتور شناسه */
#unique {
    font-size: 16px;
}

/* سِلکتور فرزند */
ul > li {
    list-style-type: none;
}

/* سِلکتور هم‌برادر */
h2 ~ p {
    color: red;
}

/* سِلکتور گروهی */
h1, h2, h3 {
    margin: 0;
}

شرح کدها

/* سِلکتور نوع */
این سِلکتور به تمام عناصر h1 در صفحه اعمال می‌شود و رنگ آن را آبی می‌کند.


/* سِلکتور کلاس */
سِلکتوری که به تمامی عناصری که کلاس button را دارند، اعمال می‌شود و رنگ پس‌زمینه آن‌ها را سبز می‌کند.


/* سِلکتور شناسه */
این سِلکتور به عنصری که دارای شناسه unique است، اعمال می‌شود و اندازه فونت آن را 16 پیکسل می‌کند.


/* سِلکتور فرزند */
این سِلکتور به تمام li هایی که فرزند مستقیم یک ul هستند، لحاظ می‌شود و موارد لیست را بدون نماد می‌کند.


/* سِلکتور هم‌برادر */
این سِلکتور به تمام pهایی که هم‌برادر h2 هستند، اعمال می‌شود و رنگ آن‌ها را قرمز می‌کند.


/* سِلکتور گروهی */
این سِلکتور به h1، h2 و h3 ها یک استایل مشترک می‌دهد و حاشیه آن‌ها را صفر می‌کند.