استكمالات للمفاهيم في دورة اكواد css اكمل معكم اليوم بشرح فئات css الزائفه وهو شرح جانبي لاستطيع الانتقال للدرس الثاني من الدورة
يتم استخدام فئة زائفة لتعريف حالة خاصة لعنصر.
على سبيل المثال ، يمكن استخدامه في:
- قم بتصميم عنصر عند تمرير المستخدم فوقه
- زارت ستايل الروابط غير المرغوبة بشكل مختلف
- قم بتصميم نمط عندما يحصل على التركيز
تركيب الطبقات الزائفة:
selector:pseudo-class {
property: value;
}
فصول المرساة الزائفة
يمكن عرض الروابط بطرق مختلفة:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
ملاحظة: يجب أن يأتي a hover بعد الرابط: a و: تمت زيارته في تعريف CSS ليكون فعالًا! a: يجب أن يأتي النشط بعد a: hover في تعريف CSS لتكون فعالة! أسماء الفئة الزائفة ليست حساسة لحالة الأحرف.
فئات زائفة وفصول CSS
يمكن دمج الفئات الزائفة مع فئات CSS:
عندما تحوم فوق الرابط في المثال ، سوف يتغير لونه:
a.highlight:hover {
color: #ff0000;
}
تأثير على <div>
div:hover {
background-color: blue;
}
تأثير تلميح بسيط
مرر مؤشر الماوس فوق عنصر <div> لعرض عنصر <p> (مثل تلميح):
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS - الطفل الأول من فئة زائفة
يتطابق: - child-class pseudo-class مع عنصر محدد هو التابع الأول لعنصر آخر.
تطابق العنصر <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 - The: lang Pseudo-class
يتيح لك: lang pseudo-class تحديد قواعد خاصة للغات مختلفة.
في المثال أدناه ، تحدد lang علامات الاقتباس لعناصر <q> مع lang = "no":
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
وسأضع بالمرفقات ملف وورد يتحوي على جميع كلاسات الفئة الزائفة وعناصرها
انتهى الشرح
بالتوفيق للجميع
اي استفسار لا تترد في طرحة
جميع الحقوق محفوظة لشركة انكور التطويرية
يمنع النقل دون ذكر المصدر
والسلام ختام