CSS Selectors
سلکتورهای CSS
سلکتورها در CSS الگوهایی هستند که به کمک آنها میتوانیم عناصر HTML را برای اعمال استایل انتخاب کنیم. انواع مختلفی از سلکتورها وجود دارد که هر کدام روش متفاوتی برای هدفگیری عناصر دارند.
🔹 انواع رایج سلکتورهای CSS:
| نوع سلکتور | نگارش | توضیح | مثال |
|---|---|---|---|
| سلکتور عنصر (تگ) | element |
همه عناصر از نوع مشخص شده را انتخاب میکند | p { color: red; } — همه پاراگرافها قرمز میشوند |
| سلکتور کلاس | .classname |
همه عناصر با کلاس مشخص را انتخاب میکند | .menu { font-size: 18px; } — همه عناصری که کلاس “menu” دارند |
| سلکتور شناسه (ID) | #idname |
عنصری با شناسه (id) مشخص را انتخاب میکند | #header { background: blue; } — عنصری با id “header” |
| سلکتور همهگیر | * |
همه عناصر صفحه را انتخاب میکند | * { margin: 0; } — حاشیه همه عناصر حذف میشود |
| سلکتور گروهی | selector1, selector2 |
همه عناصر مطابق هر یک از سلکتورها را انتخاب میکند | h1, h2, p { color: green; } — تگهای h1، h2 و p با رنگ سبز |
| سلکتور صفت | [attr=value] |
عناصر دارای یک صفت (attribute) خاص با مقدار مشخص را انتخاب میکند | input[type="text"] { border: 1px solid; } — ورودیهایی که type آنها “text” است |
🔹 مثالها:
/* انتخاب همه پاراگرافها */
p {
color: blue;
}
/* انتخاب عناصری که کلاس ‘highlight’ دارند */
.highlight {
background-color: yellow;
}
/* انتخاب عنصری با شناسه ‘main’ */
#main {
width: 500px;
}
/* انتخاب همه عناصر */
* {
box-sizing: border-box;
}
/* انتخاب چندین سلکتور با هم */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
/* انتخاب input هایی که type آنها checkbox است */
input[type=“checkbox”] {
margin: 10px;
}
دیدگاهتان را بنویسید