أهمية الترتيب في pseudo-classes لتنسيق الروابط في CSS

Amro Atef Awad · 2 يونيو 2023

لماذا يشترط الترتيب بلطريقة الاتية هل هناك سبب معين ؟؟

{}a:link

{}a:visited

{}a:hover

{}a:active

تم التعديل في 2 يونيو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

عمر قره محمد · 2 يونيو 2023

المشكلة تحدث في حال كان الرابط visited وقام المستخدم بعمل hover عليه، أو إذا كان hove ثم قمت بالنقر عليه active،

فعندها ستظهر التنسيقات الخاصة بآخر واحد تم تعريفه وذلك بالنسبة للتنسيقات المكررة أما التنسيقات المختلفة فلن تتأثر، فإذا كنت قد اعطيت كل من الـ visited و الـ hover و active ألوان مختلفة، فستكون النتيجة تعتمد على أي منهما قمت بتعريفه آخراً.

فكما تعلم فإن css هل لغة تراتبية، أي انه سيتم تنفيذ آخر خاصية من نفس النوع اعطيتها للعنصر، مثل :

div {
  color: red;
  background:#000;
}
div {
  color: blue;
}

سيكون النتيجة أن العنصر سيأخذ اللون blue، والخلفية ستكون سوداء #000.

Mustafa Suleiman · 2 يونيو 2023

أولاً سأشرح لك ما معنى كل من الـ pseudo-classes الآتية:

وقبل ذلك لنفهم ما معنى pseudo-class في CSS، وهي تعبير يستخدم لتحديد حالة محددة أو حالة خاصة لعنصر HTML، وتسمح pseudo-classes بتطبيق أنماط وتنسيقات مختلفة للعناصر بناءً على حالتها أو عنصر معين.

{}a:link هذا يحدد النمط الذي ستظهر به الروابط التي لم يتم النقر عليها بعد (روابط لم يتم زيارتها).
{}a:visited يحدد النمط الذي ستظهر به الروابط التي تم النقر عليها مسبقًا (روابط تم زيارتها أي النقر عليها).
{}a:focus تحدد النمط الذي ستظهر به الروابط عندما تكون محددة بواسطة المستخدم (جرب الضغط على Tab في الكيبورد وستجد أنه يتم التنقل بين عناصر الصفحة إلى أن تصل للروابط).
{}a:hover يحدد النمط الذي ستظهر به الروابط عندما يتم تحريك المؤشر فوقها.
{}a:active يحدد النمط الذي ستظهر به الروابط عندما يتم النقر عليها (الضغط بالفأرة دون الإفلات أي بشكل مستمر أي اللحظة التي تضغط فيها بالفأرة).

والترتيب الذي يشترط في هذه القواعد هو أمر مهم لأنه يُحدد ترتيب تطبيق الأنماط وتعديلات الشكل على الروابط وفقًا لحالة الروابط وتفاعل المستخدم معها.

ولكن ذلك ليس ضروري حيث أن التنسيق هنا يتم بناءًا على حالة العنصر وليس موقعه في الكود المكتوب، وفي حال قمت بكتابة مثلاً focus أو hover في البداية فلن يتغير شيء، حيث يطبق التنسيق بناءًا على حالة العنصر فقط.

ولتوضيح أفضل، إليك مثالًا على كيفية استخدام هذه القواعد:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

 a:focus {
      color: DarkTurquoise;
 }

a:hover {
  color: red;
}

a:active {
  color: green;
}

وستكون الروابط غير المزارة باللون الأزرق (a:link)، وعندما يتم النقر على الرابط ويتم تحويله إلى حالة مزارة، سيتغير لونه إلى اللون البنفسجي (a:visited).

وعند التنقل بين عناصر الصفحة عند الضغط على Tab سيكون اللون هو DarkTurquoise.

وعند تحريك المؤشر فوق الرابط، سيتغير لونه إلى اللون الأحمر (a:hover)، وعند النقر عليه، سيتغير لونه إلى اللون الأخضر (a:active) وجرب عدم الإفلات أي اضغط بشكل مستمر وستجد أن لونه أخضر.

وإليك مثال:

<!DOCTYPE html>
<html>
<head>
  <title>تنسيق الروابط</title>
  <style>
    a {
      color: blue;
    }

    a:visited {
      color: p;
    }

  a:focus {
      color: DarkTurquoise;
    }
    a:hover {
      color: red;
    }

    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <h1>تنسيق الروابط</h1>

  <p>
    <a href="#">روابط الصفحة</a>
    <br>
    <a href="#">رابط آخر</a>
    <br>
    <a href="#">رابط إضافي</a>
  </p>
</body>
</html>

أهمية الترتيب في pseudo-classes لتنسيق الروابط في CSS

السؤال

Amro Atef Awad

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية