در حال بارگذاری...
راهنمای کامل انتخابگرهای CSS
این راهنمای جامع انتخابگرهای CSS برای توسعه‌دهندگان طراحی شده است تا بتوانند به‌سرعت و با دقت انواع انتخابگرها را در پروژه‌های خود به‌کار ببرند. هدف این راهنما ارائه مرجعی کامل و سازمان‌یافته از تمامی انتخابگرهای CSS است، شامل انتخابگرهای پایه، ترکیبی، صفات، شبه‌کلاس‌ها، شبه‌عناصر، پیشرفته و رسانه‌ای. توسعه‌دهندگان می‌توانند از این مرجع برای انتخاب عناصر بر اساس ساختار، وضعیت فرم، تعامل کاربر و شرایط خاص استفاده کنند. با بررسی مثال‌های واقعی و پشتیبانی مرورگرها، این راهنما به بهینه‌سازی استایل‌ها، کاهش خطا و افزایش سرعت توسعه کمک می‌کند.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | انتخابگر جهانی - انتخاب همه عناصر | * { margin: 0; } | تمام مرورگرها |
| element | tagname | انتخابگر نوع - انتخاب همه عناصر از نوع مشخص | p { color: blue; } | تمام مرورگرها |
| .class | .classname | انتخابگر کلاس - انتخاب عناصر با کلاس مشخص | .highlight { background: yellow; } | تمام مرورگرها |
| \#id | #idname | انتخابگر شناسه - انتخاب عنصر با شناسه مشخص | #header { width: 100%; } | تمام مرورگرها |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | انتخابگر فرزند غیرمستقیم - انتخاب B درون A | div p { margin: 10px; } | تمام مرورگرها |
| child | A > B | انتخابگر فرزند مستقیم - انتخاب B که فرزند مستقیم A است | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | انتخابگر هم‌سایه مجاور - انتخاب B که بلافاصله بعد از A قرار دارد | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | انتخابگر هم‌سایه عمومی - انتخاب تمام Bهایی که بعد از A قرار دارند | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | انتخاب عناصر با صفت مشخص | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | انتخاب عناصر که مقدار صفت برابر با مقدار مشخص است | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | انتخاب عناصر که صفت شامل یک کلمه مشخص است | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | انتخاب عناصر که صفت با مقدار مشخص شروع می‌شود | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | انتخاب عناصر که صفت با مقدار مشخص تمام می‌شود | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | انتخاب عناصر که صفت شامل مقدار مشخص است | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | انتخاب صفت بدون حساسیت به حروف بزرگ/کوچک | \[type="EMAIL" i] { text-transform: lowercase; } | مرورگرهای مدرن |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | انتخاب اولین فرزند | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | انتخاب آخرین فرزند | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | انتخاب فرزند nام | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | انتخاب فرزند nام از انتها | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | انتخاب nام عنصر از نوع خود | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | انتخاب nام عنصر از نوع خود از انتها | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | انتخاب اولین عنصر از نوع خود | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | انتخاب آخرین عنصر از نوع خود | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | انتخاب عنصری که تنها فرزند است | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | انتخاب عنصری که تنها از نوع خود است | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | انتخاب عناصر بدون فرزند | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | انتخاب عنصر هنگام قرار گرفتن ماوس روی آن | a:hover { color: red; } | تمام مرورگرها |
| :active | :active | انتخاب عنصر هنگام کلیک/فعال شدن | button:active { transform: scale(0.95); } | تمام مرورگرها |
| :focus | :focus | انتخاب عنصر هنگام داشتن فوکوس کیبورد | input:focus { outline: 2px solid blue; } | تمام مرورگرها |
| :focus-visible | :focus-visible | انتخاب عنصر هنگام فوکوس قابل مشاهده | button:focus-visible { outline: 2px solid; } | مرورگرهای مدرن |
| :focus-within | :focus-within | انتخاب عنصر حاوی عنصر دارای فوکوس | form:focus-within { border: 1px solid blue; } | مرورگرهای مدرن |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | انتخاب عناصر فرم فعال | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | انتخاب عناصر فرم غیرفعال | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | انتخاب چک‌باکس/رادیو انتخاب‌شده | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | انتخاب چک‌باکس‌های نامشخص | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | انتخاب عناصر فرم معتبر | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | انتخاب عناصر فرم نامعتبر | input:invalid { border-color: red; } | IE10+ |
| :required | :required | انتخاب فیلدهای ضروری | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | انتخاب فیلدهای اختیاری | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | انتخاب عناصر فقط‌خواندنی | input:read-only { background: #f9f9f9; } | مرورگرهای مدرن |
| :read-write | :read-write | انتخاب عناصر قابل ویرایش | input:read-write { background: white; } | مرورگرهای مدرن |
| :placeholder-shown | :placeholder-shown | انتخاب عناصر دارای placeholder نمایش داده‌شده | input:placeholder-shown { font-style: italic; } | مرورگرهای مدرن |
| :in-range | :in-range | انتخاب عناصر با مقدار در محدوده | input:in-range { border-color: green; } | مرورگرهای مدرن |
| :out-of-range | :out-of-range | انتخاب عناصر با مقدار خارج محدوده | input:out-of-range { border-color: red; } | مرورگرهای مدرن |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | انتخاب لینک‌های بازدیدنشده | a:link { color: blue; } | تمام مرورگرها |
| :visited | :visited | انتخاب لینک‌های بازدیدشده | a:visited { color: purple; } | تمام مرورگرها |
| :any-link | :any-link | انتخاب تمام لینک‌ها | a:any-link { text-decoration: underline; } | مرورگرهای مدرن |
| :target | :target | انتخاب عنصری که هدف URL فعلی است | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | انتخاب عناصر غیر از آنچه مشخص شده | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | انتخاب عناصر مطابق با هر انتخابگر | :is(h1, h2, h3) { margin-top: 0; } | مرورگرهای مدرن |
| :where(selector) | :where(sel1, sel2) | مانند :is اما با specificity صفر | :where(h1, h2) { color: blue; } | مرورگرهای مدرن |
| :has(selector) | :has(sel) | انتخاب عناصر حاوی انتخابگر مشخص | div:has(img) { border: 1px solid; } | مرورگرهای مدرن |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | قرار دادن محتوا قبل از عنصر | p::before { content: "→ "; } | IE9+ (یک کولن IE8+) |
| ::after | ::after | قرار دادن محتوا بعد از عنصر | p::after { content: " ←"; } | IE9+ (یک کولن IE8+) |
| ::first-line | ::first-line | انتخاب اولین خط متن | p::first-line { font-weight: bold; } | IE9+ (یک کولن IE6+) |
| ::first-letter | ::first-letter | انتخاب اولین حرف متن | p::first-letter { font-size: 2em; } | IE9+ (یک کولن IE6+) |
| ::selection | ::selection | انتخاب متن انتخاب‌شده توسط کاربر | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | انتخاب متن placeholder | input::placeholder { color: #999; } | مرورگرهای مدرن |
| ::backdrop | ::backdrop | انتخاب پس‌زمینه عناصر تمام‌صفحه | dialog::backdrop { background: rgba(0,0,0,0.5); } | مرورگرهای مدرن |
| ::marker | ::marker | انتخاب نشانگر لیست | li::marker { color: red; } | مرورگرهای مدرن |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | انتخاب عنصر ریشه سند | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | انتخاب عنصر محدوده | :scope > p { margin: 0; } | مرورگرهای مدرن |
| :defined | :defined | انتخاب عناصر تعریف‌شده سفارشی | custom-element:defined { opacity: 1; } | مرورگرهای مدرن |
| :host | :host | انتخاب عنصر میزبان سایه | :host { display: block; } | مرورگرهای مدرن |
| :host(selector) | :host(sel) | انتخاب میزبان مطابق با انتخابگر | :host(.active) { color: red; } | مرورگرهای مدرن |
| :host-context(selector) | :host-context(sel) | انتخاب میزبان در زمینه خاص | :host-context(.dark) { color: white; } | مرورگرهای مدرن |
| ::slotted(selector) | ::slotted(sel) | انتخاب محتوای اسلات‌شده | ::slotted(p) { margin: 0; } | مرورگرهای مدرن |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | اعمال استایل بر اساس شرایط رسانه | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | اعمال استایل در صورت پشتیبانی مرورگر | @supports (display: grid) { .layout { display: grid; } } | مرورگرهای مدرن |
| @container | @container (condition) | اعمال استایل بر اساس اندازه کانتینر | @container (min-width: 400px) { .card { flex-direction: row; } } | مرورگرهای مدرن |
Quick Examples
css
CSS Code
/* ترکیب انتخابگرهای پایه */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* انتخابگرهای صفت برای فرم‌ها */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* شبه‌عناصر برای استایل پیشرفته */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* انتخابگرهای ساختاری پیشرفته */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* انتخابگرهای منطقی مدرن */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}بهترین روش‌ها و نکات:
از انتخابگرهای خاص برای جلوگیری از تداخل ناخواسته استایل‌ها استفاده کنید. برای قابلیت استفاده مجدد، اولویت را به انتخابگرهای کلاس بدهید. انتخابگرها را به‌صورت بهینه ترکیب کنید تا حجم فایل CSS کاهش یابد. شبه‌کلاس‌ها را در مرورگرهای مختلف تست کنید. استفاده از :not() با دقت انجام شود، زیرا می‌تواند بر عملکرد تأثیر بگذارد. به یاد داشته باشید که شبه‌عناصر در DOM واقعی وجود ندارند و عناصر مجازی ایجاد می‌کنند. هنگام استفاده از ترکیب‌های پیچیده انتخابگرها، specificity را در نظر بگیرید. برای استایل‌دهی پویا به فرم‌ها، از انتخابگرهای صفت استفاده کنید. انتخابگرهای جدید مانند :has() و :is() را برای پشتیبانی مرورگر تست کنید. انتخابگرهای مرتبط را گروه‌بندی کنید تا سازمان‌دهی کد بهتر شود. از انتخابگرهای فرزند غیرمستقیم به‌صورت هوشمندانه استفاده کنید تا از تو در تویی بیش از حد جلوگیری شود. برخی شبه‌کلاس‌ها فقط با عناصر خاص کار می‌کنند.
🧠 دانش خود را بیازمایید
آماده شروع
Reference Knowledge Check
دانش خود را درباره انتخابگرهای CSS و کاربرد آن‌ها بسنجید.
3
سوالات
70%
برای قبولی
∞
زمان
∞
تلاش‌ها
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود