CSS Selectors
تُستخدم محددات CSS "لإيجاد " (أو تحديد) عناصر HTML التي تريد تصميمها.
يمكننا تقسيم محددات CSS إلى خمس فئات:
- محددات بسيطة (تحدد العناصر بناءً على الاسم name والمعرف id والفئة class)
- محددات موحدة Combinator (تحدد العناصر بناءً على علاقة محددة بينهم)
- محددات Pseudo-class (تحدد العناصر بناءً على حالة معينة)
- محددات Pseudo-elements (تحدد نمط جزءًا من عنصر)
- محددات السمات (تحدد العناصر بناءً على سمة أو قيمة سمة)
تشرح هذه الصفحة محددات CSS الأساسية.
محدد عنصر CSS
The CSS element Selector
يحدد محدد العنصر عناصر HTML بناءً على اسم العنصر.
مثال :
هنا ، ستتم محاذاة جميع عناصر <p> في الصفحة إلى المنتصف ، بلون أحمر للنص:
------------------------
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p> ستتأثر كل فقرة بالنمط </ p>
<p id = "para1"> وهذه أيضًا! </ p>
<p> وهذه كذلك! </ p>
</body>
</html>
------------------------------------------
يظهر هذا المثال في المتصفح بالشكل :
ستتأثر كل فقرة بالنمط
وهذه أيضًا!
وهذه كذلك!
محدد id
The CSS id Selector
يستخدم محدد id سمة id لعنصر HTML لتحديد عنصر معين.
id معرف عنصر فريد داخل الصفحة ، لذلك يتم استخدام هذا المحدد لتحديد عنصر فريد واحد!
لتحديد عنصر بمعرف محدد ، اكتب الرمز (#) ، متبوعًا بمعرف العنصر.
مثال:
سيتم تطبيق قاعدة CSS أدناه على عنصر HTML بالمعرف = "para1":
-----------------------
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id = "para1"> أهلاً بالعالم! </ p>
<p> لا تتأثر هذه الفقرة بالنمط </ p>
</body>
</html>
-------------------------------------------
يظهر المثال في المتصفح بالشكل :
أهلاً بالعالم!
لا تتأثر هذه الفقرة بالنمط
ملاحظة: لا يمكن أن يبدأ اسم المعرف id برقم!
محدد كلاس CSS
The CSS class Selector
يحدد محدد كلاس عناصر HTML مع سمة كلاس معين.
لتحديد عناصر كلاس معين ، اكتب نقطة (.) متبوعًة باسم لكلاس.
مثال :
في هذا المثال ، ستكون جميع عناصر HTML التي تحتوي على class = "center" باللون الأحمر ومحاذاة للوسط:
-----------------------
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class = "center"> عنوان أحمر ومحاذاة للوسط </ h1>
<p class = "center"> فقرة حمراء ومحاذاة للوسط </ p>
</body>
</html>
------------------------------------------
يظهر المثال في المتصفح بالشكل :
عنوان أحمر ومحاذاة للوسط
فقرة حمراء ومحاذاة للوسط
يمكنك أيضًا تحديد أن من عناصر HTML هي التي يجب أن تتأثر ب لكلاس.
مثال :
في هذا المثال فقط الفقرة <p> التي تحتوي على class = "center" ستكون حمراء ومحاذاة للوسط:
------------------------
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class = "center"> لن يتأثر هذا العنوان </ h1>
<p class = "center"> ستظهر هذه الفقرة باللون الأحمر وتحاذي الوسط. </ p>
</body>
</html>
-------------------------------------------
يظهر هذا المثال في المتصفح بالشكل :
لن يتأثر هذا العنوان
ستظهر هذه الفقرة باللون الأحمر وتحاذي الوسط.
يمكن أن تشير عناصر HTML أيضًا إلى أكثر من فئة واحدة.
مثال :
في هذا المثال سيتم تطبيق النمط class="center" و class="large"
-----------------------
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class = "center"> لن يتأثر هذا العنوان </ h1>
<p class = "center"> ستظهر هذه الفقرة باللون الأحمر وتحاذي الوسط. </ p>
<p class = "center large"> ستكون هذه الفقرة باللون الأحمر ومحاذاة للوسط وبخط كبير. </ p>
</body>
</html>
--------------------------------------------
يظهر هذا المثال في المتصفح بالشكل :
لن يتأثر هذا العنوان
ستظهر هذه الفقرة باللون الأحمر وتحاذي الوسط.
ستكون هذه الفقرة باللون الأحمر ومحاذاة للوسط وبخط كبير.
ملاحظة: لا يمكن أن يبدأ اسم لكلاس برقم!
المحدد العام في CSS
The CSS Universal Selector
المحدد العام (*) يختار كل عناصر HTML على الصفحة.
مثال :
ستؤثر قاعدة CSS أدناه على كل عنصر HTML بالصفحة:
-----------------------
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1> أهلا بالعالم !</h1>
<p> ستتأثر كل فقرة بالنمط </ p>
<p id = "para1"> وهذه أيضًا! </ p>
<p> وهذه كذلك! </ p>
</body>
</html>
------------------------------------------------
يظهر هذا المثال في المتصفح بالشكل :
أهلا بالعالم
ستتأثر كل فقرة بالنمط
وهذه أيضا
وهذه كذلك
محدد تجميع CSS
The CSS Grouping Selector
يحدد محدد التجميع جميع عناصر HTML بنفس تعريفات الأنماط.
انظر إلى كود CSS التالي (العناصر h1 و h2 و p لها نفس تعريفات النمط):
كود :
------------------------
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
----------------------------------------------------
سيكون من الأفضل تجميع المحددات لتقليل الكود.
لتجميع المحددات ، افصل بين كل محدد بفاصلة.
مثال :
---------------------------
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1> أهلاً بالعالم! </ h1>
<h2> عنوان أصغر! </ h2>
<p> هذه فقرة </ p>
</body>
</html>
--------------------------------------------
يظهر هذا المثال في المتصفح بالشكل :
أهلاً بالعالم!
عنوان أصغر!
هذه فقرة
نهاية الدرس.
