الصيغ المزيفة CSS

ما هي النوعية الزائدة؟

النوعية الزائدة تستخدم لتحديد الحالة الخاصة للعنصر.

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

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

النحوغة

نحوغة النوعية الزائدة:

محدد:النوعية الزائدة {
  الخصوصية: القيمة;
}

النوعية الزائدة الموجهة للشبكة

يمكن للروابط أن تظهر بطرق مختلفة:

مثال

/* الرابط لم يتم زيارتة */
a:link {
  color: #FF0000;
}
/* الرابط الذي تم زيارتة */
a:visited {
  color: #00FF00;
}
/* الرابط عند وضع المؤشر فوقه */
a:hover {
  color: #FF00FF;
}
/* الرابط المحدد */
a:active {
  color: #0000FF;
}

جربها بنفسك

ملاحظة:a:hover يجب أن تكون بعد تعريف CSS، a:link و a:visited بعد ذلك يمكن أن يبدأ التأثير!a:active يجب أن تكون بعد تعريف CSS، a:hover بعد ذلك يمكن أن يبدأ التأثير! اسم النوعية الزائدة غير حساس للمساحة

النوعية الزائدة وأنواع CSS

يمكن دمج النوعية الزائدة مع أنواع CSS:

عندما تضع مؤشر الفأرة على الرابط في المثال، سيغير اللون:

مثال

a.highlight:hover {
  color: #ff0000;
}

جربها بنفسك

عند وضع المؤشر فوق <div>

استخدامها في عنصر <div> :hover النوعية الزائدة:

مثال

div:hover {
  background-color: blue;
}

جربها بنفسك

تأثير الأداة التوجيهية البسيط

ضع المؤشر فوق عنصر <div> لعرض عنصر <p> (مثل تأثير الأداة التوجيهية):

ضع المؤشر فوقي لعرض عنصر <p>.

هياه، أنا هنا!

مثال

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

جربها بنفسك

CSS - الصيغة المزيفة :first-child

:first-child تطابق الصيغ المزيفة مع العناصر المحددة: العنصر هو أول طفل لعنصر آخر.

التطابق مع أول عناصر <p>

في المثال التالي، يتم تطابق الخلاصة مع أي عناصر <p> التي هي أول أطفال لأي عنصر آخر:

مثال

p:first-child {
  color: blue;
}

جربها بنفسك

التطابق مع أول عناصر <i> داخل جميع عناصر <p>

في المثال التالي، يتم تطابق الخلاصة مع أول عناصر <i> داخل جميع عناصر <p>:

مثال

p i:first-child {
  color: blue;
}

جربها بنفسك

التطابق مع جميع عناصر <i> داخل أول عناصر <p>

في المثال التالي، يتم تطابق الخلاصة مع جميع عناصر <i> داخل عناصر <p> التي هي أول أطفال لعدة عناصر أخرى:

مثال

p:first-child i {
  color: blue;
}

جربها بنفسك

CSS - الصيغة المزيفة :lang

:lang تسمح الصيغ المزيفة بتعريف قواعد خاصة للغات المختلفة.

في المثال التالي،:lang تحديد العلامات المزدوجة للعناصر <q> التي لها خاصية lang="en":

مثال

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>نص بعض النصوص <q lang="no">قولة في جملة</q> نص بعض النصوص.</p>
</body>
</html>

جربها بنفسك

مزيد من الأمثلة

إضافة أنواع مختلفة من الأسلوب إلى الروابط
هذا المثال يوضح كيفية إضافة أنواع أخرى من الأسلوب إلى الروابط.
استخدام :focus
هذا المثال يوضح كيفية استخدام الصيغة المزيفة :focus.

كل أنواع الصيغ المزيفة CSS

مصطلح الاختيار مثال وصف المثال
:active a:active اختيار الروابط النشطة.
:checked input:checked اختيار كل عناصر <input> المحددة.
:disabled input:disabled اختيار كل عناصر <input> المحجوبة.
:empty p:empty اختيار كل عناصر <p> التي ليس لديها عناصر فرعية.
:enabled input:enabled اختيار كل علامة <input> مفعلة.
:first-child p:first-child اختيار كل علامة <p> كالطفل الأول لعلامة <p> الأم.
:first-of-type p:first-of-type اختيار كل علامة <p> كالطفل الأول لعلامة <p> الأم.
:focus input:focus اختيار علامة <input> الحاصلة على التركيز.
:hover a:hover اختيار كل رابط يتم وضع فأرة الماوس فوقه.
:in-range input:in-range اختيار علامة <input> كقيمة في نطاق معين.
:invalid input:invalid اختيار كل علامة <input> كقيمة غير صالحة.
:lang(لغة) p:lang(it) اختيار كل علامة <p> كقيمة لخصائص lang تبدأ بـ "it".
:last-child p:last-child اختيار كل علامة <p> كالطفل الأخير لعلامة <p> الأم.
:last-of-type p:last-of-type اختيار كل علامة <p> كالطفل الأخير لعلامة <p> الأم.
:link a:link اختيار كل رابط لم يتم زيارتة.
:not(محدد) :not(p) اختيار كل علامة كغير علامة <p>.
:nth-child(n) p:nth-child(2) اختيار كل علامة <p> كالطفل الثاني لعلامة <p> الأم.
:nth-last-child(n) p:nth-last-child(2) اختيار كل علامة <p> كالطفل الثاني لعلامة <p> الأم، من آخر الطفيل.
:nth-last-of-type(n) p:nth-last-of-type(2) اختيار كل علامة <p> كالطفل الثاني لعلامة <p> الأم، من آخر الطفيل.
:nth-of-type(n) p:nth-of-type(2) اختيار كل علامة <p> كالطفل الثاني لعلامة <p> الأم.
:only-of-type p:only-of-type اختيار كل علامة <p> كالطفل الوحيد لعلامة <p> الأم.
:only-child p:only-child اختيار علامة <p> كالطفل الوحيد لصاحبها.
:اختياري إدخال:اختياري اختيار عناصر <input> التي لا تحتوي على خاصية "required".
:out-of-range input:out-of-range اختيار عناصر <input> التي تحتوي على قيمة خارج النطاق المحدد.
:read-only input:read-only اختيار عناصر <input> التي تم تحديد خاصية "readonly".
:read-write input:read-write اختيار عناصر <input> التي لا تحتوي على خاصية "readonly".
:required input:required اختيار عناصر <input> التي تم تحديد خاصية "required".
:root root اختيار العنصر الجذر.
:target #news:target اختيار العنصر الموجود في #news النشط (انقر على URL يحتوي على اسم الرابط المحدد).
:valid input:valid اختيار جميع عناصر <input> التي تحتوي على قيمة صالحة.
:visited a:visited اختيار جميع الروابط التي تم زيارتها.

جميع عناصر الهروب CSS

مصطلح الاختيار مثال وصف المثال
::after p::after إدراج محتوى بعد كل عنصر <p>.
::before p::before إدراج محتوى قبل كل عنصر <p>.
::first-letter p::first-letter اختيار الحرف الأول لكل عنصر <p>.
::first-line p::first-line اختيار السطر الأول لكل عنصر <p>.
::selection p::selection اختيار الجزء من العنصر الذي اختره المستخدم.