الفئة الوهمية (pseudo-class) (نقطتان مفردتان :) تختار العناصر بناءً على حالتها أو موضعها — شيء لا يمكن التعبير عنه بفئة عادية، مثل "أثناء التمرير فوقه" أو "الطفل الأول."
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
ترتيب الروابط مهم (LVHA): :link و :visited و :hover و :active.
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() قوية جداً — 2n (الزوجية)، 2n+1 (الفردية)، 3n (كل ثالث)، إلخ.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
الفئات الوهمية تستخدم نقطة واحدة (:hover، حالة)؛ العناصر الوهمية تستخدم نقطتين (::before، جزء مولد). لا تخلط بينهما.
الفئات الوهمية تتيح لك تصميم التفاعل (hover/focus — ضروري لواجهة مستخدم قابلة للاستخدام والوصول) والهيكل (تخطيط الصفوف، الأول/الأخير) بدون ترميز إضافي أو JavaScript.
الفئات الحديثة (:has و :is و :focus-visible) تحل المشاكل التي تطلبت سابقاً JavaScript أو محددات متكررة.