تسمى التأثيرات الخاصة لأنها تضيف مزايا وتأثيرات خاصة للعنصر توهمك أن هذه التأثيرات من أساسه و لكن في الواقع هي فقط مصطنعة له
التركيبة
ان تركيبة التأثيرات الخاصة pseudo-classes هي :
selector:pseudo-class {property:value;}
أي نستخدم المنتقى ثم ":" ثم التأثير الحركي للعنصر ثم الخاصية والقيمة مثل a:link
اذا أردنا استدعاء تصميم خاص من خلال class (يمكنك مشاهدة درس class) عندها ستصبح التركيبة كالتالي
selector.class:pseudo-class {property:value;}
أي نستخدم المنتقى ثم اسم خاص قمنا بانشائه مثل .mystyle ثم التأثير ثم ":" ثم التأثير الحركي للعنصر ثم الخاصية والقيمة مثل a.mystyle:link
استخدام التأثيرات مع الرابط التشعبي a
يمكن عرض الروابط التشعبية من خلال العديد من الطرق المختلفة باستخدام CSS
مثال
a:link {color:#FF0000;} /* الرابط التشعبي */
a:visited {color:#00FF00;} /* الرابط الذي تم زيارته */
a:hover {color:#FF00FF;} /* عند وضع الفأرة على الرابط */
a:active {color:#0000FF;} /* بعد فتح الرابط */
ملاحظة
- يجب استخدام a:hover بعد a:link و a:visited وذلك ليكون أكثر فاعلية
- يجب استخدام a:active بعدa:hover وذلك ليكون أكثر فاعلية
- ليس بحالة حساسة case-sensitive عند استخدام التأثيرات Pseudo-class
التصميم الخاص CSS clases و التأثيرات الخاصة Pseudo-classes
يمكن دمج التصميم الخاص Pseudo-classes مع CSS
مثال
a.red:visited {color:#FF0000;}
<a class="red" href="css/syntax-css">CSS تركيبة</a>
ان تم فتح الرابط في المثال السابق عندها سيتم تطبيق عليه التصميم الخاص وهو اللون الأحمر
العنصر الفرعي :first-child للتأثيرات الخاصة Pseudo-class
تستخدم خاصية العنصر الفرعي لتطبيق تصميم معين على عنصر معين اذا كان فرعاً من عنصر آخر ولايتم تطبيق التصميم على العنصر ان كان فرعاً لعنصر آخر غير معرف من خلال CSS وسيتم تقديم مثال مع شرحه لاحقاً في هذا الدرس
ملاحظة : ان تم تحديد نوع الصفحة <!DOCTYPE> فإن خاصية العنصر الفرعي :first-child ستعمل على متصفح IE8 بالاضافة الى النسخ الأقدم
استخدام العنصر الفرعي :first-child مع أول عنصر <p>
في هذا المثال سيتم تطبيق العنصر الفرعي لأول فقرة <p> باللون الأزرق , وعلى الرغم من أنه لدينا أكثر من فقرة فإن التصميم سيطبق على الفقرة الأولى فقط
مثال
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head><body><p>المعهد العربي للبرمجة</p>
<p>المعهد العربي للبرمجة</p>
</body>
</html>
استخدام العنصر الفرعي :first-child مع أول <i> لجميع عناصر <p>
في هذا المثال سيتم تطبيق العنصر الفرعي مع أول <i> وهو وسم لجعل الخط مائل على جميع الفقرات الموجودة في صفحة الويب وفي المثال لدينا العنصر <i> ملون باللون الأزرق حسب كود التصميم .
عند عرض النتيجة على المتصفح على الرغم من ان كل فقرة تحتوي على كلمتان بالشكل المائل الا أننا قمنا بتلوين أول كلمة مائلة <i> والتي موجودة حصراً ضمن الفقرة <p>
مثال
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head><body><p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
</body>
</html>
استخدام العنصر الفرعي :first-child مع جميع عناصر <i> لأول فقرة <p>
في هذا المثال سيتم تطبيق العنصر الفرعي لجميع عناصر <i> وهو وسم لجعل الخط مائل على أول فقرة موجودة في صفحة الويب وفي المثال لدينا العنصر <i> ملون باللون الأزرق حسب كود التصميم .
عند عرض النتيجة على المتصفح على الرغم من ان كل فقرة تحتوي على كلمتان بالشكل المائل الا أننا قمنا بتلوين جميع الكلمات المائلة <i> والتي موجودة حصراً ضمن أول فقرة <p>
مثال
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
<p>المعهد <i>العربي</i> للبرمجة هو المعهد العربي<i> للبرمجة</i></p>
</body>
</html>
استخدام التأثيرات Pseudo-class مع تحديد اللغة :lang
تسمح التأثيرات بتحديد قواعد خاصة للغات مختلفة :lang
ستعمل هذه الخاصية على متصفح IE8 ان تم تحديد نوع الصفحة <!DOCTYPE>
في المثال التالي خاصية :lang محددة باشارات الاقتباس للعنصر q بدون تحديد للغة lang="no"
<html>
<head>
<style type="text/css">
q:lang(no)
{quotes: "~" "~";}
</style>
</head>
<body>
<p>هنا نص <q lang="no">اقتباس في فقرة</q> هنا نص</p>
</body>
</html>
| المنتقى | مثال | شرح المثال |
|---|---|---|
| :link | a:link | اختيار جميع الروابط التشعبية التي لم يتم فتحها بعد |
| :visited | a:visited | اختيار جميع الروابط التشعبية التي تم فتحها |
| :active | a:active | اختيار جميع الروابط التشعبية الفعالة |
| :hover | a:hover | اختيار الروابط عند تمرير الماوس فوقهم |
| :focus | input:focus | اختيار العنصر المدخل المركز عليه |
| :first-letter | p:first-letter | اختيار الحرف الأول من العنصر <p> |
| :first-line | p:first-line | اختيار السطر الأول من العنصر <p> |
| :first-child | p:first-child | اختيار جميع العناصر المتمركزة في الصف الأول الابن من عناصر الأب |
| :before | p:before | ادراج محتوى قبل كل عنصر <p> |
| :after | p:after | ادراج محتوى بعد كل عنصر <p> |
| :lang(language) | p:lang(it) | اختيار لغة العنصر من خلال اللاحقة lang="it" |
ليست هناك تعليقات:
إرسال تعليق