الفئات الزائفة: البنيوية والتفاعلية

ما هي الفئات الزائفة؟

الفئة الزائفة هي كلمة مفتاحية تُضاف الى المحدد لتحديد حالة خاصة او موضع معين للعنصر المحدد. على عكس الفئات العادية التي تضيفها يدويا الى عناصر HTML، فإن الفئات الزائفة ديناميكية -- يطبقها المتصفح تلقائيا بناء على تفاعل المستخدم او بنية المستند او حالة العنصر. تبدأ الفئات الزائفة دائما بنقطتين مفردتين (:) يليهما اسم الفئة الزائفة.

الصيغة العامة تبدو كالتالي:

selector:pseudo-class {
    property: value;
}

/* امثلة */
a:hover { color: red; }
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }

الفئات الزائفة قوية للغاية لأنها تتيح لك تنسيق العناصر بناء على شروط لا يمكن التعبير عنها بمحددات بسيطة. تنقسم الى عدة فئات: تفاعلية (حالات يقودها المستخدم)، بنيوية (الموضع في شجرة DOM)، متعلقة بالنماذج (حالات الإدخال)، ومتنوعة (اللغة، الهدف، النفي). في هذا الدرس سنغطي جميعها بالتفصيل.

الفئات الزائفة التفاعلية

تستجيب الفئات الزائفة التفاعلية لإجراءات المستخدم مثل التمرير والنقر والتركيز وزيارة الروابط. هذه من بين اكثر الفئات الزائفة استخداما في تطوير CSS اليومي.

الفئة الزائفة :hover

تُطبق الفئة الزائفة :hover عندما يضع المستخدم مؤشره فوق عنصر دون النقر عليه. وهي واحدة من اكثر الفئات الزائفة استخداما لإنشاء ملاحظات بصرية على العناصر التفاعلية مثل الازرار والروابط والبطاقات.

/* تمرير الزر الاساسي */
.btn {
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* تأثير تمرير البطاقة */
.card {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* تمرير صف الجدول */
tr:hover {
    background-color: #f5f5f5;
}

/* خط تحت رابط التنقل عند التمرير */
nav a {
    text-decoration: none;
    position: relative;
}

nav a:hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

الفئة الزائفة :focus

تُطبق الفئة الزائفة :focus عندما يتلقى العنصر التركيز -- عادة عندما ينقر المستخدم عليه او ينتقل اليه باستخدام مفتاح Tab. هذا امر بالغ الأهمية لـإمكانية الوصول لأن مستخدمي لوحة المفاتيح يعتمدون على مؤشرات التركيز المرئية لمعرفة العنصر الذي يتفاعلون معه.

/* نمط تركيز مخصص لحقول الادخال */
input:focus,
textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* نمط التركيز للازرار */
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
}

/* نمط التركيز للروابط */
a:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
    border-radius: 2px;
}

الفئة الزائفة :active

تُطبق الفئة الزائفة :active خلال لحظة تنشيط العنصر -- اي اثناء ضغط المستخدم عليه (زر الفأرة مضغوط او اللمس على الشاشة). تعطي ملاحظات لمسية بأن شيئا ما يحدث.

/* تأثير ضغط الزر */
.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* لون الرابط النشط */
a:active {
    color: #e74c3c;
}

/* تأثير ضغط البطاقة */
.card:active {
    transform: scale(0.98);
}

الفئة الزائفة :visited

تستهدف الفئة الزائفة :visited الروابط (عناصر <a>) التي زارها المستخدم بالفعل. يساعد هذا المستخدمين على التمييز بين الروابط التي نقروا عليها وتلك التي لم ينقروا عليها.

/* لون الرابط الافتراضي */
a:link {
    color: #3498db;
}

/* لون الرابط المزار */
a:visited {
    color: #8e44ad;
}

/* تنسيق نتائج البحث */
.search-result a:visited {
    color: #681da8;
}

.search-result a:visited .result-title {
    color: #681da8;
}

ترتيب LVHA للروابط

عند تنسيق الروابط، يهم الترتيب الذي تعلن فيه الفئات الزائفة بسبب خصوصية CSS والتسلسل. الترتيب الموصى به يعرف بـ LVHA (غالبا يُتذكر بعبارة "LoVe HAte"):

1. :link -- الروابط غير المزارة
2. :visited -- الروابط المزارة سابقا
3. :hover -- عندما يكون المؤشر فوق الرابط
4. :active -- اثناء النقر على الرابط

/* L - Link (غير مزار) */
a:link {
    color: #3498db;
    text-decoration: none;
}

/* V - Visited (مزار) */
a:visited {
    color: #8e44ad;
}

/* H - Hover (تمرير) */
a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* A - Active (نشط) */
a:active {
    color: #c0392b;
}

الفئة الزائفة :focus-within

تُطبق الفئة الزائفة :focus-within على عنصر عندما يتلقى اي من عناصره الفرعية التركيز. هذا مفيد للغاية لتمييز مجموعات النماذج بأكملها او الحاويات عندما يركز المستخدم على حقل ادخال بداخلها.

/* تمييز مجموعة النموذج بأكملها عند تركيز اي حقل ادخال */
.form-group {
    padding: 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-group:focus-within {
    border-color: #3498db;
    background-color: #ebf5fb;
}

/* إظهار قائمة اقتراحات البحث عند التركيز على مربع البحث */
.search-container .suggestions {
    display: none;
}

.search-container:focus-within .suggestions {
    display: block;
}

/* تمييز صف الجدول عند التركيز على حقل ادخال داخلي */
tr:focus-within {
    background-color: #fff3cd;
}

الفئة الزائفة :focus-visible

تُطبق الفئة الزائفة :focus-visible فقط عندما يحدد المتصفح ان التركيز يجب ان يُشار اليه بصريا. عادة يعني هذا انها تنشط للتنقل بلوحة المفاتيح (مفتاح Tab) ولكن ليس للنقر بالفأرة. يتيح لك هذا توفير مؤشرات تركيز لمستخدمي لوحة المفاتيح مع الحفاظ على مظهر نظيف لمستخدمي الفأرة.

/* ازالة الإطار الافتراضي لكل التركيز */
button:focus {
    outline: none;
}

/* اضافة إطار فقط للتنقل بلوحة المفاتيح */
button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}

/* نفس النمط للروابط */
a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px dashed #e74c3c;
    outline-offset: 3px;
}

الفئات الزائفة البنيوية

تحدد الفئات الزائفة البنيوية العناصر بناء على موضعها في شجرة DOM -- علاقتها بالعناصر الأصلية والشقيقة. هذه قوية لتنسيق القوائم والجداول والشبكات واي هياكل متكررة دون اضافة فئات اضافية الى HTML.

:first-child و :last-child

تحدد الفئة الزائفة :first-child العنصر الذي هو اول عنصر فرعي لأصله. تحدد الفئة الزائفة :last-child آخر عنصر فرعي. هذه مفيدة لإزالة او اضافة حدود وهوامش او تنسيق خاص للعناصر الاولى او الاخيرة في قائمة او حاوية.

/* ازالة الحد العلوي من اول عنصر في القائمة */
.menu-list li:first-child {
    border-top: none;
}

/* ازالة الحد السفلي من آخر عنصر في القائمة */
.menu-list li:last-child {
    border-bottom: none;
}

/* تنسيق خاص لاول فقرة في مقال */
article p:first-child {
    font-size: 1.2em;
    font-weight: 500;
    color: #2c3e50;
}

/* ازالة الهامش السفلي من آخر عنصر في البطاقة */
.card > *:last-child {
    margin-bottom: 0;
}

:nth-child(n) -- محدد القوة

الفئة الزائفة :nth-child(n) هي واحدة من اكثر المحددات تنوعا في CSS. تحدد العناصر بناء على موضعها بين الأشقاء باستخدام صيغة. يمكن ان يكون المعامل n رقما او كلمة مفتاحية او صيغة بالشكل an+b.

• :nth-child(3) -- يحدد العنصر الفرعي الثالث بالضبط.
• :nth-child(odd) -- يحدد الاول والثالث والخامس وهكذا. مثل :nth-child(2n+1).
• :nth-child(even) -- يحدد الثاني والرابع والسادس وهكذا. مثل :nth-child(2n).
• :nth-child(3n) -- يحدد كل عنصر ثالث (3، 6، 9، ...).
• :nth-child(3n+1) -- يحدد الاول والرابع والسابع والعاشر وهكذا.
• :nth-child(-n+3) -- يحدد اول 3 عناصر فقط.
• :nth-child(n+4) -- يحدد كل شيء من العنصر الرابع فصاعدا.

/* صفوف الجدول المخططة */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* كل عنصر ثالث يحصل على لون خاص */
.gallery-item:nth-child(3n) {
    border-color: #e74c3c;
}

/* اول 3 عناصر (العناصر المميزة) */
.product-list li:nth-child(-n+3) {
    font-weight: bold;
    border-left: 3px solid #f39c12;
}

/* جميع العناصر من الرابع فصاعدا */
.product-list li:nth-child(n+4) {
    opacity: 0.8;
}

/* تحديد العناصر من 3 الى 6 */
.list-item:nth-child(n+3):nth-child(-n+6) {
    background-color: #eaf2f8;
}

:nth-last-child(n)

تعمل الفئة الزائفة :nth-last-child(n) تماما مثل :nth-child(n) لكنها تعد من النهاية بدلا من البداية.

/* آخر عنصرين في القائمة */
.todo-list li:nth-last-child(-n+2) {
    color: #95a5a6;
    font-style: italic;
}

/* العنصر قبل الأخير */
.breadcrumb li:nth-last-child(2) {
    font-weight: bold;
}

/* التنسيق بناء على العدد الاجمالي للأشقاء:
   حدد العنصر الاول فقط إذا كان هناك 3 عناصر بالضبط */
li:first-child:nth-last-child(3) {
    color: green;
}

:nth-of-type(n) و :first-of-type و :last-of-type

بينما يعد :nth-child جميع الأشقاء بغض النظر عن النوع، فإن :nth-of-type يعد فقط الأشقاء من نفس نوع العنصر. وبالمثل، يحدد :first-of-type و :last-of-type اول وآخر شقيق من نوع معين.

هذا التمييز بالغ الأهمية. فكر في حاوية بعناصر مختلطة:

/* HTML:
<div class="content">
    <h2>العنوان</h2>
    <p>الفقرة الاولى</p>
    <p>الفقرة الثانية</p>
    <img src="photo.jpg" alt="صورة">
    <p>الفقرة الثالثة</p>
</div>
*/

/* هذا يحدد اول عنصر <p> (بغض النظر عن انواع الأشقاء الاخرى) */
.content p:first-of-type {
    font-size: 1.25em;
    font-weight: 500;
}

/* هذا لن يعمل كما هو متوقع:
   p:first-child يبحث عن <p> يكون اول عنصر فرعي.
   لكن اول عنصر فرعي هو <h2>، لذا لا يتم تحديد شيء! */
.content p:first-child {
    /* هذا لا يحدد شيئا في HTML اعلاه */
}

/* كل فقرة اخرى (الاولى، الثالثة، الخامسة...) */
.content p:nth-of-type(odd) {
    background-color: #f0f0f0;
}

/* الفقرة الاخيرة */
.content p:last-of-type {
    margin-bottom: 0;
}

:only-child و :only-of-type

تحدد الفئة الزائفة :only-child عنصرا يكون العنصر الفرعي الوحيد لأصله. يحدد :only-of-type عنصرا يكون الشقيق الوحيد من نوعه.

/* إذا كان هناك عنصر واحد فقط في القائمة، نسقه بشكل مختلف */
.notification-list li:only-child {
    text-align: center;
    font-style: italic;
    color: #7f8c8d;
}

/* إذا كان هناك <p> واحد فقط داخل مقال */
article p:only-of-type {
    font-size: 1.1em;
    line-height: 1.8;
}

/* إخفاء اسهم التنقل إذا كان هناك شريحة واحدة فقط */
.carousel-slide:only-child ~ .carousel-arrows {
    display: none;
}

الفئة الزائفة :root

تطابق الفئة الزائفة :root العنصر الجذري للمستند -- في HTML يكون هذا دائما عنصر <html>. لها خصوصية اعلى من محدد النوع html، مما يجعلها مثالية لتعريف خصائص CSS المخصصة (المتغيرات) والإعدادات الافتراضية العامة.

:root {
    /* لوحة الالوان */
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-text: #2c3e50;
    --color-bg: #ffffff;

    /* الخطوط */
    --font-sans: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', monospace;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* المسافات */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* نصف قطر الحدود */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

/* الاستخدام */
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--line-height-base);
}

.btn-primary {
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

الفئة الزائفة :empty

تحدد الفئة الزائفة :empty العناصر التي ليس لها عناصر فرعية -- لا عناصر فرعية ولا محتوى نصي ولا مسافات بيضاء. هذا مفيد لإخفاء الحاويات الفارغة او توفير محتوى بديل.

/* إخفاء الفقرات الفارغة */
p:empty {
    display: none;
}

/* إظهار رسالة عندما لا تحتوي القائمة على عناصر */
.todo-list:empty::before {
    content: 'لا توجد مهام بعد. اضف مهمتك الاولى!';
    color: #95a5a6;
    font-style: italic;
    display: block;
    padding: 20px;
    text-align: center;
}

/* إخفاء حدود خلايا الجدول الفارغة */
td:empty {
    border: none;
}

/* ازالة المسافات من العناصر الفارغة */
.container > div:empty {
    margin: 0;
    padding: 0;
}

الفئة الزائفة :not() للنفي

تحدد الفئة الزائفة :not() كل عنصر لا يطابق المحدد المعطى. إنها مفيدة للغاية لتطبيق الانماط على نطاق واسع ثم استبعاد عناصر محددة.

/* جميع الفقرات باستثناء تلك التي لها فئة "intro" */
p:not(.intro) {
    font-size: 1rem;
}

/* جميع حقول الادخال باستثناء مربعات الاختيار وازرار الاختيار */
input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
}

/* اضافة حد سفلي لجميع عناصر القائمة باستثناء الاخير */
li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

/* تنسيق جميع الروابط التي ليس لها فئة "btn" */
a:not(.btn) {
    color: #3498db;
    text-decoration: underline;
}

/* جميع العناصر الفرعية المباشرة لـ .grid غير المخفية */
.grid > *:not(.hidden) {
    display: block;
}

الفئة الزائفة :lang()

تحدد الفئة الزائفة :lang() العناصر بناء على اللغة المحددة عبر سمة lang في HTML. هذا مفيد لتطبيق قواعد الخطوط او المسافات الخاصة باللغة.

/* النص العربي -- من اليمين لليسار وخط مختلف */
:lang(ar) {
    direction: rtl;
    font-family: 'Noto Sans Arabic', 'Tahoma', sans-serif;
}

/* النص الصيني -- ارتفاع سطر مختلف للقراءة */
:lang(zh) {
    line-height: 1.8;
}

/* علامات الاقتباس اليابانية */
:lang(ja) {
    quotes: '\300C' '\300D' '\300E' '\300F';
}

/* علامات الاقتباس الإنجليزية */
:lang(en) {
    quotes: '\201C' '\201D' '\2018' '\2019';
}

الفئة الزائفة :target

تحدد الفئة الزائفة :target العنصر الذي يتطابق معرفه (id) مع جزء عنوان URL الحالي (الجزء بعد # في عنوان URL). على سبيل المثال، إذا كان عنوان URL هو page.html#section2، فإن العنصر الذي لديه id="section2" يطابق :target.

/* تمييز القسم المستهدف */
section:target {
    background-color: #fef9e7;
    border-left: 4px solid #f39c12;
    padding-left: 16px;
}

/* تمرير سلس مع هدف مميز */
html {
    scroll-behavior: smooth;
}

:target {
    animation: highlight-fade 2s ease;
}

@keyframes highlight-fade {
    from { background-color: #f9e79f; }
    to { background-color: transparent; }
}

/* نظام تبويبات بـ CSS فقط باستخدام :target */
.tab-content {
    display: none;
}

.tab-content:target {
    display: block;
}

فئات النماذج الزائفة

تتيح لك فئات النماذج الزائفة تنسيق عناصر النماذج بناء على حالتها الحالية. هذه ضرورية لإنشاء تجارب نماذج بديهية مع ملاحظات بصرية فورية.

:enabled و :disabled

تستهدف هذه الفئات الزائفة عناصر النموذج بناء على ما إذا كانت مفعلة او معطلة.

:checked

تُطبق الفئة الزائفة :checked على مربعات الاختيار وازرار الاختيار المحددة حاليا.

:required و :optional

تستهدف هذه حقول النموذج بناء على ما إذا كانت سمة required موجودة.

:valid و :invalid

تُطبق هذه بناء على ما إذا كانت قيمة حقل النموذج تستوفي قيود التحقق الخاصة به (مثل type="email" و pattern و min و max وغيرها).

:placeholder-shown

تُطبق الفئة الزائفة :placeholder-shown عندما يكون نص العنصر النائب مرئيا حاليا -- مما يعني ان حقل الادخال فارغ.

/* الحقول المعطلة */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #ecf0f1;
    cursor: not-allowed;
    opacity: 0.7;
}

/* الحقول المفعلة */
input:enabled {
    background-color: #fff;
}

/* مؤشر الحقل المطلوب */
input:required {
    border-left: 3px solid #e74c3c;
}

/* مؤشر الحقل الاختياري */
input:optional {
    border-left: 3px solid #95a5a6;
}

/* الادخال الصالح */
input:valid {
    border-color: #2ecc71;
}

input:valid + .validation-icon::after {
    content: '\2713';
    color: #2ecc71;
}

/* الادخال غير الصالح */
input:invalid {
    border-color: #e74c3c;
}

input:invalid + .validation-icon::after {
    content: '\2717';
    color: #e74c3c;
}

/* مربع اختيار مخصص باستخدام :checked */
input[type="checkbox"]:checked + label {
    color: #2ecc71;
    text-decoration: line-through;
}

/* مفتاح تبديل باستخدام :checked */
.toggle-input:checked + .toggle-slider {
    background-color: #2ecc71;
}

.toggle-input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

/* نمط التسمية العائمة باستخدام :placeholder-shown */
.float-label input:placeholder-shown + label {
    top: 50%;
    font-size: 1rem;
    color: #95a5a6;
}

.float-label input:not(:placeholder-shown) + label,
.float-label input:focus + label {
    top: 0;
    font-size: 0.75rem;
    color: #3498db;
}

الجمع بين الفئات الزائفة

واحدة من اقوى جوانب الفئات الزائفة هي انه يمكنك ربط عدة فئات زائفة على محدد واحد. يتيح لك هذا استهداف سيناريوهات محددة للغاية.

/* العنصر الاول الذي يتم التمرير عليه ايضا */
li:first-child:hover {
    background-color: #eaf2f8;
}

/* حقول الادخال المطلوبة غير الصالحة حاليا وغير العارضة للعنصر النائب */
input:required:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
    background-color: #fdf2f2;
}

/* آخر فقرة من نوعها غير فارغة */
p:last-of-type:not(:empty) {
    margin-bottom: 0;
}

/* صفوف الجدول الفردية التي يتم التمرير عليها */
tr:nth-child(odd):hover {
    background-color: #d4efdf;
}

/* اول رابط من نوعه داخل التنقل المركز عليه */
nav a:first-of-type:focus-visible {
    outline: 3px solid #f39c12;
}

الملخص

في هذا الدرس تعلمت عن النطاق الكامل لفئات CSS الزائفة. إليك النقاط الرئيسية:

• الفئات الزائفة التفاعلية (:hover و :focus و :active و :visited و :focus-within و :focus-visible) تستجيب لإجراءات المستخدم وهي ضرورية للتفاعل وإمكانية الوصول.
• ترتيب LVHA (Link و Visited و Hover و Active) يجب اتباعه عند تنسيق الروابط لتجنب تعارضات التسلسل.
• الفئات الزائفة البنيوية (:first-child و :last-child و :nth-child() و :nth-of-type() وغيرها) تحدد العناصر حسب الموضع دون اضافة فئات اضافية.
• :nth-child(an+b) متعدد الاستخدامات للغاية -- يمكنك تحديد العناصر الفردية/الزوجية وكل عنصر نوني والنطاقات والمزيد.
• :not() يتيح لك استبعاد العناصر وهو واحد من اكثر الفئات الزائفة استخداما في CSS الإنتاجي.
• فئات النماذج الزائفة (:checked و :valid و :invalid و :required و :placeholder-shown وغيرها) تمكن تجارب نماذج غنية بـ CSS وحده.
• :root هو المكان القياسي لتعريف خصائص CSS المخصصة (المتغيرات).
• يمكن ربط الفئات الزائفة معا لاستهداف محدد للغاية.