تتيح لك الفئات الزائفة الوظيفية (functional pseudo-classes) اختيار العناصر بناءً على شروط أو علاقات أكثر تعقيداً. وعلى عكس الفئات الزائفة العادية التي تستهدف العناصر استناداً إلى حالة معينة - مثل :hover أو :focus ، فإن الفئات الزائفة الوظيفية تقبل وسائط (arguments) داخل أقواس؛ ومن هنا جاءت تسميتها بـ "الفئات الزائفة الوظيفية" (functional pseudo-classes).

من أمثلة الفئات الزائفة الوظيفية:

• :is()

• :where()

• :has()

• :not()

لنلقِ نظرةً أكثر تعمقاً على كلٍّ من هذه الفئات الزائفة الوظيفية (functional pseudo-classes) مع تقديم أمثلة عليها.

تُعد الفئة الزائفة :is() مفيدة عندما ترغب في تطبيق تنسيقات على مجموعة من العناصر التي تشترك في بعض الخصائص، ولكن ليس كلها. على سبيل المثال، قد ترغب في تنسيق أنواع مختلفة من الأزرار في موقعك الإلكتروني، بما في ذلك عناصر الأزرار button، والروابط التي تم تنسيقها لتبدو كأزرار، وعناصر الإدخال input من النوعين submit و reset. إليك مثال يوضح ذلك؛ فبدون استخدام الدالة :is()، ستضطر إلى كتابة مُحدِّد (selector) معقد كهذا:

<link rel="stylesheet" href="styles.css">

<button>زر تجريبي</button>
<a href="#" class="button">رابط مُصمَّم على هيئة زر</a>
<input type="submit" value="إرسال" />
<input type="reset" value="إعادة ضبط" />
            

button, 
a.button, 
input[type='submit'], 
input[type='reset'] {
 background-color: darkblue;
 color: white;
 border: 1px solid darkblue;
 padding: 10px 20px;
 text-decoration: none;
 border-radius: 5px;
 cursor: pointer;
 display: inline-block;
 margin: 5px;
 font-size: 16px;
 text-align: center;
}

button:hover, 
a.button:hover, 
input[type='submit']:hover, 
input[type='reset']:hover {
 background-color: blue;
 border-color: blue;
}
            

معاينة:

باستخدام الدالة :is() ، يمكنك كتابة مُحدِّد أكثر إيجازاً ووضوحاً على النحو التالي:

<link rel="stylesheet" href="styles.css">

<button>زر تجريبي</button>
<a href="#" class="button">رابط مُصمَّم على هيئة زر</a>
<input type="submit" value="إرسال" />
<input type="reset" value="إعادة ضبط" />
            

:is(button, a.button, input[type='submit'], input[type='reset']) {
 background-color: darkblue;
 color: white;
 border: 1px solid darkblue;
 padding: 10px 20px;
 text-decoration: none;
 border-radius: 5px;
 cursor: pointer;
 display: inline-block;
 margin: 5px;
 font-size: 16px;
 text-align: center;
}

:is(button, a.button, input[type='submit'], input[type='reset']):hover {
 background-color: blue;
 border-color: blue;
}
            

معاينة:

تعمل الفئة الزائفة :where() بشكل مشابه لـ :is() ، لكنها لا تزيد من درجة تحديد (specificity) المُحدِّدات الخاصة بك. وهذا يجعلها مثالية لتطبيق الأنماط دون التأثير على درجة تحديد القواعد الأخرى.

على سبيل المثال، يمكنك استخدام الدالة :where() لضبط الهوامش margin والحشوات padding لعناصر العناوين (headings) على القيمة صفر. يضمن ذلك ألا تتعارض عملية إعادة الضبط (reset) هذه مع أي تنسيقات أكثر تحديداً قد تطبقها لاحقاً. إليك مثال على ذلك:

<link rel="stylesheet" href="styles.css">

<h1>عنوان الصفحة</h1>
<h2>عنوان فرعي</h2>
<h3>نقطة</h3>

<p>فقرة نموذجية.</p>
<p>فقرة نموذجية.</p>
<p>فقرة نموذجية.</p>
            

:where(h1, h2, h3) {
 margin: 0;
 padding: 0;
}
            

معاينة:

كان تنسيق عنصر أبٍ (Styling a parent element) بناءً على حالات عناصره الأبناء (its children's states) أمراً صعباً في السابق، إلى أن ظهرت الفئة الزائفة :has(). فهي تتيح لك تطبيق تنسيقات على عنصر أبٍ (parent element) استناداً إلى وجود عناصره الأبناء أو حالاتها.

على سبيل المثال، سيُطبَّق كود CSS أدناه فقط على أي عنصر article يحتوي بداخله على عنصر h2 :

<link rel="stylesheet" href="styles.css">

<article>
 <h2>عنوان فرعي</h2>
 <p>لوريم إيبسوم دولور سيت أميت.</p>
</article>

<article>
 <h3>نقطة</h3>
 <p>لوريم إيبسوم دولور سيت أميت.</p>
 <p>لوريم إيبسوم دولور سيت أميت.</p>
</article>
            

article:has(h2) {
 border: 2px solid hotpink;
}
            

معاينة:

تُعد الفئة الزائفة :not() مثالية للحالات التي ترغب فيها بتطبيق أنماط على مجموعة من العناصر، مع استبعاد عنصر واحد أو أكثر. في كود CSS أدناه، سيظهر أي زر - غير الزر الرئيسي (primary button) - بخلفية رمادية (grey background) :

<link rel="stylesheet" href="styles.css">

<button class="primary">زر أساسي</button>
<button class="secondary">زر ثانوي</button>
<button class="danger">زر ثانوي آخر</button>
            

button {
 padding: 10px 20px;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
 border: none;
 color: white;
}

button.primary {
 background-color: deepskyblue;
}

button:not(.primary) {
 background-color: grey;
}
            

معاينة: