CSS Pseudo-classes Reference
🎨 شبهکلاسها (Pseudo-classes) در CSS
🔹 شبهکلاسها برای انتخاب حالت خاصی از یک المنت استفاده میشوند.
مثلاً وقتی ماوس روی آن است، وقتی انتخاب شده، اولین فرزندش است، و غیره.
نحو کلی به این شکل است:
selector:pseudo-class {
property: value;
}
🧭 دستهبندی شبهکلاسها
🖱️ 1. شبهکلاسهای تعامل کاربر (User Action Pseudo-classes)
| شبهکلاس | توضیح | مثال |
|---|---|---|
:hover |
زمانی که ماوس روی المنت قرار میگیرد | button:hover { background: blue; } |
:active |
زمانی که روی المنت کلیک میشود | button:active { transform: scale(0.95); } |
:focus |
زمانی که المنت در فوکوس است (مثلاً درون input کلیک شده) | input:focus { border-color: green; } |
:focus-visible |
زمانی که فوکوس با کیبورد قابل مشاهده است | button:focus-visible { outline: 2px solid blue; } |
:focus-within |
وقتی هر فرزند المنت در فوکوس است | form:focus-within { border-color: blue; } |
📑 2. شبهکلاسهای ساختاری (Structural Pseudo-classes)
| شبهکلاس | توضیح | مثال |
|---|---|---|
:first-child |
اولین فرزند از نوع خود در والد | li:first-child { color: red; } |
:last-child |
آخرین فرزند در والد | li:last-child { color: blue; } |
:only-child |
تنها فرزند والد | p:only-child { font-style: italic; } |
:nth-child(n) |
انتخاب فرزند nام (یا با الگو مثل 2n) | li:nth-child(2) { color: green; } |
:nth-last-child(n) |
مانند بالا ولی از انتها | li:nth-last-child(1) { color: purple; } |
:first-of-type |
اولین المنت از نوع خودش | p:first-of-type { font-weight: bold; } |
:last-of-type |
آخرین المنت از نوع خودش | p:last-of-type { color: orange; } |
:only-of-type |
تنها المنت از آن نوع | p:only-of-type { color: blue; } |
:nth-of-type(n) |
انتخاب المنت nام از نوع خاص | p:nth-of-type(3) { color: red; } |
:nth-last-of-type(n) |
مشابه بالا اما از انتها | p:nth-last-of-type(2) { color: gray; } |
:empty |
المنتی که هیچ محتوایی ندارد | div:empty { display: none; } |
🌐 3. شبهکلاسهای لینک و بازدید (Link Pseudo-classes)
| شبهکلاس | توضیح | مثال |
|---|---|---|
:link |
لینکهایی که هنوز باز نشدهاند | a:link { color: blue; } |
:visited |
لینکهایی که کاربر قبلاً باز کرده | a:visited { color: purple; } |
📝 ترتیب صحیح برای لینکها:
a:link { … }
a:visited { … }
a:hover { … }
a:active { … }
بهخاطر بسپار: LVHA (Link → Visited → Hover → Active)
✅ 4. شبهکلاسهای فرمها (Form Pseudo-classes)
| شبهکلاس | توضیح | مثال |
|---|---|---|
:enabled |
المانهایی که فعال هستند | input:enabled { border: green; } |
:disabled |
المانهای غیرفعال | input:disabled { background: #ccc; } |
:checked |
چکباکس یا رادیو انتخابشده | input:checked { accent-color: red; } |
:indeterminate |
حالت نامشخص چکباکس | input:indeterminate { background: yellow; } |
:valid |
ورودی معتبر (بر اساس pattern یا type) | input:valid { border: green; } |
:invalid |
ورودی نامعتبر | input:invalid { border: red; } |
:required |
المانهایی که ویژگی required دارند | input:required { background: #fffa; } |
:optional |
المانهایی که required نیستند | input:optional { background: #fafafa; } |
:in-range |
مقدار ورودی عددی در محدوده معتبر | input:in-range { color: green; } |
:out-of-range |
مقدار عددی خارج از محدوده | input:out-of-range { color: red; } |
:placeholder-shown |
وقتی placeholder در input نمایش داده میشود | input:placeholder-shown { color: gray; } |
🧠 5. شبهکلاسهای منطقی و حالتهای خاص
| شبهکلاس | توضیح | مثال |
|---|---|---|
:not(selector) |
انتخاب تمام المنتها بهجز مورد خاص | div:not(.active) { opacity: 0.5; } |
:is(selector, …) |
سادهتر کردن چند انتخابگر | :is(h1, h2, h3) { color: blue; } |
:where(selector, …) |
مشابه :is() ولی بدون تأثیر بر Specificity |
:where(nav a) { text-decoration: none; } |
:has(selector) |
انتخاب عنصری که شامل انتخابگر دیگر است (CSS4) | div:has(img) { border: 2px solid green; } |
:target |
المانی که با hash در URL انتخاب شده | #section1:target { background: yellow; } |
:root |
ریشه سند (در HTML یعنی <html>) |
:root { --main-color: blue; } |
:lang(language) |
بر اساس زبان عنصر | p:lang(en) { font-style: italic; } |
:scope |
اشاره به محدودهی انتخاب فعلی در DOM | :scope > p { color: red; } |
💡 مثال ترکیبی
form:has(input:invalid) {
border: 2px solid red;
}
ul li:first-child:hover {
background: lightblue;
}
دیدگاهتان را بنویسید