صفة class تُستخدم لتحديد فئة لعناصر HTML.
استخدام فئات متعددة:
يمكن لعدة عناصر HTML مشاركة نفس الفئة.
أهمية فئة class:
- تستخدم فئة
classعادةً للإشارة إلى اسم فئة محددة في ملف CSS لتطبيق نفس التنسيقات على كل العناصر التي تحمل نفس الفئة. - يمكن استخدامها أيضًا بواسطة JavaScript للوصول إلى العناصر التي تحمل نفس الفئة والتحكم فيها.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
في هذا المثال، لدينا عنصرين <span> يحملان صفة class بقيمة “note”. سيتم تنسيق هذين العنصرين بنفس الشكل وفقًا لتعريف الفئة .note في رأس الصفحة.
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
نصيحة: يمكن استخدام صفة class على أي عنصر HTML.
ملاحظة: اسم الفئة حساس لحالة الأحرف!
صياغة الفئات في CSS
لإنشاء فئة:
- اكتب نقطة (.) يليها اسم الفئة.
- عِقب ذلك، عرّف خصائص CSS داخل أقواس مفتوحة وغلق { }.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
تعدد الفئات في CSS :
يمكن لعناصر HTML أن تنتمي إلى أكثر من فئة واحدة.
لتحديد فئات متعددة، اكتب أسماء الفئات مفصولة بمسافة، مثل <div class="city main">. سيحصل العنصر على أنماط CSS وفقًا لجميع الفئات المحددة.
في المثال التالي، ينتمي عنصر <h2> الأول إلى كل من فئة city وفئة main، وسيحصل على أنماط CSS من كلا الفئتين:
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
عناصر مختلفة يمكنها مشاركة نفس الفئة
يمكن لعناصر HTML مختلفة أن تشير إلى نفس اسم الفئة.
في المثال التالي، يشير كل من <h2> و <p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
استخدام صفة class في JavaScript :
يمكن استخدام اسم الفئة أيضًا بواسطة JavaScript لإجراء مهام معينة لعناصر محددة.
يستطيع JavaScript الوصول إلى العناصر التي تحمل اسم فئة معين باستخدام طريقة getElementsByClassName().
مثال:
انقر على الزر لإخفاء جميع العناصر التي تحمل فئة “city”:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
لا تقلق!
ليس من الضروري أن تفهم التعليمات البرمجية في المثال السابق بشكل كامل في هذه المرحلة. الغرض الأساسي هو توضيح مفهوم استخدام صفة class مع JavaScript، ويمكنك العودة إلى هذا المثال لاحقًا بعد تعمقك أكثر في لغة JavaScript.
الفصل:
- صفة
classفي HTML: تحدد اسمًا أو أكثر من أسماء الفئات لعناصر HTML. - استخدام الفئات: تستخدم الفئات في CSS و JavaScript لتحديد عناصر معينة والتحكم فيها.
- استخدام الفئات مع أي عنصر: يمكن استخدام صفة
classعلى أي عنصر HTML. - حساسية اسم الفئة: اسم الفئة حساس لحالة الأحرف، لذلك تختلف “city” و “City” عن بعضهما.
- تشارك الفئات: يمكن لعناصر HTML مختلفة أن تشارك نفس اسم الفئة، وتتقاسم الأنماط المحددة لها.
- وصول JavaScript للعناصر بالفئة: يمكن لـ JavaScript الوصول إلى العناصر التي تحمل فئة معينة باستخدام طريقة
getElementsByClassName().
