CSSVerse | الفئات والعناصر الزائفة

اختبار الفئات الزائفة Pseudo-classes في CSS

إختبار

ما هي الفئات الزائفة (pseudo-classes) ؟

هي قواعد في لغة CSS تُنشئ محتوى إضافياً داخل عنصر ما عند الحاجة.
هي كلمات مفتاحية تُضاف إلى المُحدِّد (selector) لتنسيق عنصر بناءً على حالته.
هي خصائص تُستخدم لضبط حجم العنصر أو تخطيطه على الصفحة.
هي مُحدِّدات تُستخدم لإضافة تأثيرات حركية على عنصر ما أثناء التفاعل معه.

هي كلمات مفتاحية تُضاف إلى المُحدِّد (selector) لتنسيق عنصر بناءً على حالته.
ما هي الفئة الزائفة (pseudo-class) التي تُطبَّق عندما يتم توجيه جهاز تأشير فوق عنصرٍ ما؟

:hover
:focus
:active
:checked

:hover
ما هو العنصر الزائف (pseudo-element) الذي يتيح لك تنسيق الحرف الأول من فقرة ما؟

:last-of-type
:first-letter
::first-letter
:first-child

::first-lettre
ما هي الفئة الزائفة (pseudo-class) التي تُغيِّر نمط العنصر أثناء النقر عليه؟

:hover
:checked
:focus
:active

:active
ما هي الفئة الزائفة (pseudo-class) التي تُستخدم لتنسيق عنصر ما عندما يكون جاهزاً لتلقي مدخلات المستخدم، مثل حقل نصي عند النقر عليه أو الانتقال إليه باستخدام مفتاح Tab ؟

:visited
:focus
:active
::focus

:focus

أي من قواعد CSS التالية تضيف النص ملاحظة: بشكل صحيح أمام كل عنصر فقرة (paragraph element) يحمل الفئة (class) المسماة note ؟


p::before {
 content: "ملاحظة:";
}


p.note::after {
 content: "ملاحظة:";
}


.note::before {
 content: "ملاحظة:";
}


p.note::before {
 content: "ملاحظة:";
}


p.note::before {
 content: "ملاحظة:";
}

ما هي الفئة الزائفة (pseudo-class) التي تُطبَّق على حقل الإدخال عند اختياره أو تفعيله؟

:disabled
:checked
:optional
:required

:checked

أيٌّ مما يلي يُمثّل الصيغة الصحيحة لتنسيق العنصر الأخير في قائمة؟


li:last-child {
 color: blue;
}


#li:last-child {
 color: blue;
}


li:nth-child(last) {
 color: blue;
}


.li:last-child() {
 color: blue;
}


li:last-child {
 color: blue;
}

ما هي الفئة الزائفة (pseudo-class) التي تستهدف حقول الإدخال غير المطلوبة (التي لا يلزم تعبئتها)؟

::optional
:enable
:optional
:required

:optional
ما الذي تقوم به الفئة الزائفة :disabled ؟

تختار العناصر التي لا تطابق مُحدِّدًا (selector) معينًا.
تُطبِّق تنسيقات على العناصر غير المتاحة لتفاعل المستخدم.
تُطبِّق تنسيقات على العناصر التي يتم تمرير مؤشر الفأرة فوقها.
تُطبِّق تنسيقات على عناصر الإدخال (inputs) المُحدَّدة (checked).

تُطبِّق تنسيقات على العناصر غير المتاحة لتفاعل المستخدم.
أي فئة زائفة (pseudo-class) تُطبَّق عندما يستوفي حقل الإدخال في نموذجٍ ما معايير التحقق الخاصة به؟

:checked
:required
:disabled
:valid

:valid
أيٌّ من هذه الخيارات لا يُعدّ فئةً زائفةً (pseudo-class) متعلقةً بالموقع؟

:current
:link
:any-link
:visited

:current

أيٌّ مما يلي يختار عنصر القائمة الثالث؟


li:last-child(3) {
 color: red;
}


li:child(3) {
 color: red;
}


li:nth-child(three) {
 color: red;
}


li:nth-child(3) {
 color: red;
}


li:nth-child(3) {
 color: red;
}

ما هي العناصر التي ستظهر باللون الأزرق blue عند استخدام كود CSS التالي؟


p:is(.blue, .highlight) {
 color: blue;
}


<p class="blue">الفقرة 1</p>
<p class="highlight">الفقرة 2</p>


<p class="class">الفقرة 1</p>
<p class="highlight">الفقرة 2</p>


<div class="blue">الفقرة 1</div>
<div class="highlight">الفقرة 2</div>


<p>الفقرة 1</p>
<span class="highlight">الفقرة 2</span>


<p class="blue">الفقرة 1</p>
<p class="highlight">الفقرة 2</p>

ما الذي تفعله الفئة الزائفة :not() ؟

تختار العناصر التي تطابق مُحدِّدًا معينًا.
تُضيف أنماطًا (styles) إلى جميع العناصر.
تختار جميع العناصر التابعة لعنصر أب.
تختار العناصر التي لا تطابق مُحدِّدًا معينًا.

تختار العناصر التي لا تطابق مُحدِّدًا معينًا.
ما الذي تقوم به قاعدة CSS التالية؟
```
p:first-of-type {
 font-style: italic;
}
            
```
يختار الابن الأول لكل عنصر من عناصر p.
يختار أول عنصر p في المستند.
يختار أول عنصر p داخل حاوية أب.
يختار جميع عناصر p في المستند.

يختار أول عنصر p داخل حاوية أب.
ما الذي تقوم به الفئة الزائفة :last-of-type ؟

يختار العنصر الابن الأول من نوعٍ محددٍ داخل عنصره الأب.
يختار العنصر الابن الأوسط من نوعٍ محددٍ داخل عنصره الأب.
يختار العنصر الابن الأخير من نوعٍ محددٍ داخل عنصره الأب.
يختار كل العناصر الأبناء من نوعٍ محددٍ داخل عنصره الأب.

يختار العنصر الابن الأخير من نوعٍ محددٍ داخل عنصره الأب.
أي فئة زائفة (pseudo-class) تُستخدم لاختيار العنصر الثاني في قائمة ما؟

:nth-child(2)
:is()
:required
:first-child

:nth-child(2)
أيٌّ من هذه يُعدُّ فئةً زائفةً وظيفيةً (functional pseudo-class) ؟

:is()
:checked
:match()
:first-child

:is()
أيٌّ من هذه الخيارات لا يُعدُّ فئةً زائفةً وظيفيةً (functional pseudo-class) ؟

:contains()
:not()
:where()
:has()

:contains()

→ السابق التالي ←

اختبار الفئات الزائفة Pseudo-classes في CSS

ما هي الفئات الزائفة (pseudo-classes) ؟

هي كلمات مفتاحية تُضاف إلى المُحدِّد (selector) لتنسيق عنصر بناءً على حالته.

ما هي الفئة الزائفة (pseudo-class) التي تُطبَّق عندما يتم توجيه جهاز تأشير فوق عنصرٍ ما؟

:hover

ما هو العنصر الزائف (pseudo-element) الذي يتيح لك تنسيق الحرف الأول من فقرة ما؟

::first-lettre

ما هي الفئة الزائفة (pseudo-class) التي تُغيِّر نمط العنصر أثناء النقر عليه؟

:active

ما هي الفئة الزائفة (pseudo-class) التي تُستخدم لتنسيق عنصر ما عندما يكون جاهزاً لتلقي مدخلات المستخدم، مثل حقل نصي عند النقر عليه أو الانتقال إليه باستخدام مفتاح Tab ؟

:focus

أي من قواعد CSS التالية تضيف النص ملاحظة: بشكل صحيح أمام كل عنصر فقرة (paragraph element) يحمل الفئة (class) المسماة note ؟

p.note::before { content: "ملاحظة:"; }

ما هي الفئة الزائفة (pseudo-class) التي تُطبَّق على حقل الإدخال عند اختياره أو تفعيله؟

:checked

أيٌّ مما يلي يُمثّل الصيغة الصحيحة لتنسيق العنصر الأخير في قائمة؟

li:last-child { color: blue; }

ما هي الفئة الزائفة (pseudo-class) التي تستهدف حقول الإدخال غير المطلوبة (التي لا يلزم تعبئتها)؟

:optional

ما الذي تقوم به الفئة الزائفة :disabled ؟

تُطبِّق تنسيقات على العناصر غير المتاحة لتفاعل المستخدم.

أي فئة زائفة (pseudo-class) تُطبَّق عندما يستوفي حقل الإدخال في نموذجٍ ما معايير التحقق الخاصة به؟

:valid

أيٌّ من هذه الخيارات لا يُعدّ فئةً زائفةً (pseudo-class) متعلقةً بالموقع؟

:current

أيٌّ مما يلي يختار عنصر القائمة الثالث؟

li:nth-child(3) { color: red; }

ما هي العناصر التي ستظهر باللون الأزرق blue عند استخدام كود CSS التالي؟

<p class="blue">الفقرة 1</p> <p class="highlight">الفقرة 2</p>

ما الذي تفعله الفئة الزائفة :not() ؟

تختار العناصر التي لا تطابق مُحدِّدًا معينًا.

ما الذي تقوم به قاعدة CSS التالية؟

يختار أول عنصر p داخل حاوية أب.

ما الذي تقوم به الفئة الزائفة :last-of-type ؟

يختار العنصر الابن الأخير من نوعٍ محددٍ داخل عنصره الأب.

أي فئة زائفة (pseudo-class) تُستخدم لاختيار العنصر الثاني في قائمة ما؟

:nth-child(2)

أيٌّ من هذه يُعدُّ فئةً زائفةً وظيفيةً (functional pseudo-class) ؟

:is()

أيٌّ من هذه الخيارات لا يُعدُّ فئةً زائفةً وظيفيةً (functional pseudo-class) ؟

:contains()

`p.note::before { content: "ملاحظة:"; }`

`li:last-child { color: blue; }`

`li:nth-child(3) { color: red; }`

`<p class="blue">الفقرة 1</p> <p class="highlight">الفقرة 2</p>`