دليل کلایه CSS

مصطلحات وهمية CSS

تُستخدم المصطلحات الوهمية لتحديد الحالات الخاصة للعناصر.

على سبيل المثال، يمكن استخدامها لـ:

  • ضبط النمط عند وضع الفأرة فوق العنصر
  • ضبط النمط للروابط المكتشفة والمستخدمة
  • ضبط النمط عند الحصول على العنصر على التركيز
  • ضبط النمط للعناصر النموذجية/غير النموذجية/الضرورية/اختيارية

يظهر الجدول أدناه مختلف مصطلحات المصطلحات في CSS:

مصطلحات وهمية مثال وصف المثال
:active a:active اختر رابط نشط
:any-link a:anylink اختر جميع العناصر <a> أو <area> التي تحتوي على خصائص href.
:auto-fill input:autofill اختر جميع عناصر <input> التي تم ملئها تلقائيًا من قبل المستعرض.
:checked option:checked تنطبق على جميع العناصر المحددة من <input> أو <option>.
:default input:default اختر العنصر النموذجي في مجموعة العناصر ذات الصلة.
:defined :defined اختر جميع العناصر المحددة (عناصر معايير أو مخصصة).
:dir() :dir(rtl) اختر جميع العناصر التي تحتوي على اتجاه نص معين.
:disabled option:disabled اختر جميع العناصر المحظورة، غالبًا ما يستخدم في عناصر النموذج.
:empty div:empty اختر جميع العناصر بدون عناصر فرعية (بما في ذلك عناصر النص).
:enabled input:enabled اختر جميع العناصر المفعلة، ويستخدم عادة في عناصر النموذج.
:first @page :first تمثل الصفحة الأولى للوثيقة المطبوعة (يستخدم مع @page rule).
:first-child p:first-child اختر العناصر التي هي أول ابن لعنصر الأم (في مجموعة من الإخوة).
:first-of-type li:first-of-type اختر العناصر التي هي من نوع معين في مجموعة من الإخوة.
:focus select:focus اختر العناصر التي تحصل على التركيز، ويستخدم عادة في عناصر النموذج.
:focus-visible button:focus-visible اختر العناصر التي تحصل على التركيز (يطبق فقط النمط على التركيز من خلال لوحة المفاتيح وليس الفأرة).
:focus-within form:focus-within تطابق العناصر أو أي من أبنائها الحاصلين على التركيز.
:fullscreen :fullscreen اختر العناصر التي هي في نموذج الشاشة الكاملة.
:has() h2:has(+p) اختر العناصر <h2> التي تأتي بعد عناصر <p>، وتطبيق النمط على <h2>.
:hover a:hover اختر العناصر التي تكون عليها فائض بالفأرة.
:in-range input:in-range اختر عناصر <input> التي لها قيمة في النطاق المحدد.
:indeterminate input:indeterminate اختر عناصر النموذج التي هي في حالة غير معروفة.
:invalid input:invalid اختر عناصر النموذج غير الصالحة.
:is() :is(ul, ol) اختر جميع العناصر <ul> و <ol>.
:lang() p:lang(it) اختر عناصر <p> التي لها خاصية lang قيمتها "it" (اللغة الإيطالية).
:last-child li:last-child اختر العناصر <li> التي هي آخر ابن لعنصر الأم.
:last-of-type p:last-of-type اختر عناصر <p> التي هي آخر عناصر <p> لعنصر الأم.
:left @page :left تمثل جميع الصفحات اليسرى للوثيقة المطبوعة (يستخدم مع @page rule).
:link a:link اختر جميع الروابط غير المستخدمة.
:modal :modal اختر العناصر التي هي في حالة نماذج.
:not() :not(p) اختر العناصر التي ليست عناصر <p>.
:nth-child() p:nth-child(2) اختر عناصر <p> التي هي ثاني ابن العنصر الأم.
:nth-last-child() p:nth-last-child(2) اختيار العناصر <p> التي تكون العنصر الثاني الأخير من الأطفال في عنصر الآب.
:nth-last-of-type() p:nth-last-of-type(2) اختيار العناصر <p> التي تكون العنصر الثاني الأخير من نوع <p> في عنصر الآب.
:nth-of-type() p:nth-of-type(2) اختيار العناصر <p> التي تكون العنصر الثاني من نوع <p> في عنصر الآب.
:only-child p:only-child اختيار العناصر <p> التي تكون العنصر الوحيد في عنصر الآب.
:only-of-type p:only-of-type اختيار العناصر <p> التي تكون العنصر الوحيد من نوع <p> في عنصر الآب.
:optional textarea:optional اختيار العناصر المدخلة أو <select> أو <textarea> التي لا تحتوي على خاصية required.
:out-of-range input:out-of-range اختيار العناصر المدخلة التي تحتوي على قيمة خارج المدى المحدد.
:placeholder-shown input:placeholder-shown اختيار العناصر المدخلة أو <textarea> التي تحتوي على نص مسبق.
:popover-open :popover-open اختيار العناصر التي تكون في حالة عرض النافذة المنبثقة.
:read-only input:read-only اختيار العناصر المدخلة التي تحتوي على خاصية readonly.
:read-write input:read-write اختيار العناصر المدخلة القابلة للتعديل.
:required input:required اختيار العناصر المدخلة التي تحتوي على خاصية required.
:right @page :right تمثل جميع الصفحات اليمنى للوثيقة للطباعة (يستخدم مع @page rule).
:root :root اختيار عنصر جذر المستند.
:scope :scope اختيار العناصر التي تكون نقطة مرجع أو نطاق لل.matcher.
:state() :state() اختيار العناصر المخصصة التي تحتوي على حالة مخصصة معينة.
:target :target اختيار العنصر المستهدف الحالي.
:user-invalid :user-invalid اختيار العناصر العنصرية التي تحتوي على قيمة غير صالحة (بعد التفاعل مع المستخدم).
:user-valid :user-valid اختيار العناصر العنصرية التي تحتوي على قيمة صالحة (بعد التفاعل مع المستخدم).
:valid input:valid اختيار جميع العناصر المدخلة التي تحتوي على قيمة صالحة.
:visited a:visited اختر جميع الروابط المزوربة.
:where() :where(ol, ul) اختر جميع العناصر <ul> و <ol>.