المقدمة
في CSS، تُستخدم Selectors (المحددات) لاستهداف عناصر HTML وتطبيق الأنماط عليها. فهم هذه المحددات يعدّ خطوة مهمة لتخصيص تصميم الويب بدقة. في هذا الدرس، سنتعرف على المحددات الأساسية مثل (*, div, #id, .class) ثم نتعمق في المحددات المتقدمة مثل (>), (+), (~) و(:).
أولًا: Selectors الأساسية
1. المحدد العام (Universal Selector)
- يتم استخدام
*لاستهداف جميع العناصر في صفحة الويب.
* {
margin: 0;
padding: 0;
}شرح:
- في المثال أعلاه، يتم إزالة المسافات الخارجية (margin) والداخلية (padding) من جميع العناصر.
2. محدد العنصر (Element Selector)
- يستهدف عناصر HTML بناءً على اسم الوسم (tag name) مثل
div،p، أوh1.
div {
background-color: #f0f0f0;
}شرح:
- هذا الكود يطبق لون خلفية رمادي على جميع عناصر
<div>في الصفحة.
3. محدد المعرف (ID Selector)
- يستهدف عنصرًا محددًا باستخدام معرف فريد (ID) مسبوقًا بالرمز
#.
#header {
background-color: #333;
color: white;
}HTML:
<div id="header">هذا هو الهيدر</div>شرح:
- في المثال أعلاه، سيتم تطبيق التصميم على العنصر الذي يحمل المعرف
header.
4. محدد الفئة (Class Selector)
- يستهدف عنصرًا أو مجموعة عناصر باستخدام فئة (Class) مسبوقة بنقطة
..
.text-center {
text-align: center;
color: blue;
}HTML:
<p class="text-center">هذا النص في المنتصف</p>شرح:
- يتم تطبيق الأنماط على جميع العناصر التي تستخدم الفئة
text-center.
ثانيًا: Selectors المتقدمة
1. المحدد الأبن المباشر (Child Selector): الرمز >
- يستهدف العناصر التي تكون أبناء مباشرة لعنصر آخر.
div > p {
color: red;
}HTML:
<div>
<p>هذا نص في عنصر div (سيكون أحمر)</p>
<div>
<p>هذا نص داخل div فرعي (لن يتأثر)</p>
</div>
</div>شرح:
- يتم تطبيق اللون الأحمر فقط على الفقرة التي هي ابنة مباشرة للعنصر
<div>.
2. المحدد الشقيق المباشر (Adjacent Sibling Selector): الرمز +
- يستهدف العنصر الذي يأتي مباشرة بعد عنصر آخر في نفس المستوى.
h1 + p {
font-size: 18px;
}HTML:
<h1>عنوان</h1>
<p>فقرة تأتي بعد العنوان (سيتم تنسيقها)</p>
<p>فقرة أخرى (لن تتأثر)</p>شرح:
- يتم تنسيق الفقرة التي تأتي مباشرة بعد
<h1>فقط.
3. المحدد الشقيق العام (General Sibling Selector): الرمز ~
- يستهدف جميع العناصر الشقيقة التي تأتي بعد عنصر معين، حتى لو لم تكن مباشرة.
h1 ~ p {
color: green;
}HTML:
<h1>عنوان</h1>
<p>الفقرة الأولى بعد العنوان (ستكون خضراء)</p>
<p>الفقرة الثانية بعد العنوان (ستكون خضراء أيضًا)</p>شرح:
- يتم تطبيق اللون الأخضر على جميع الفقرات التي تأتي بعد
<h1>في نفس المستوى.
4. المحددات الزائفة (Pseudo-Classes): الرمز :
- تُستخدم لتحديد حالات خاصة للعناصر، مثل عندما يتم التفاعل معها أو عند عرض أول عنصر من نوعه.
أمثلة على Pseudo-Classes:
a:hover {
color: red;
}HTML:
<a href="#">رابط</a>شرح:
- يتم تطبيق اللون الأحمر على الرابط عند تمرير مؤشر الفأرة فوقه.
p:first-child {
font-weight: bold;
}HTML:
<div>
<p>هذه الفقرة هي أول عنصر في div (ستكون بخط عريض)</p>
<p>هذه الفقرة لن تتأثر</p>
</div>شرح:
- يتم تطبيق التنسيق فقط على أول فقرة داخل عنصر
<div>.
5. المحددات الزائفة (Pseudo-Elements): الرمز ::
- تُستخدم لتحديد أجزاء معينة من العناصر، مثل أول حرف أو سطر.
أمثلة على Pseudo-Elements:
p::first-line {
color: blue;
}HTML:
<p>هذه الفقرة تحتوي على عدة أسطر، وسيكون السطر الأول أزرق.</p>شرح:
- يتم تطبيق اللون الأزرق فقط على السطر الأول من الفقرة.
تطبيق عملي: استخدام Selectors الأساسية والمتقدمة
الكود الكامل:
ملف HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>تطبيق عملي على Selectors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>العنوان الرئيسي</h1>
<p>هذه الفقرة الأولى.</p>
<p>هذه الفقرة الثانية.</p>
<div>
<p>هذه فقرة داخل div فرعي.</p>
</div>
<button>زر التفاعل</button>
</div>
</body>
</html>ملف CSS (styles.css):
/* تنسيق عام */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* تنسيق الفقرات */
.container > p {
color: green;
}
/* تنسيق الشقيق المباشر */
h1 + p {
font-size: 20px;
font-weight: bold;
}
/* تنسيق الشقيق العام */
h1 ~ p {
color: blue;
}
/* تنسيق الزر عند التفاعل */
button:hover {
background-color: #008cba;
color: white;
}خاتمة
في هذا الدرس، تعرّفنا على Selectors الأساسية مثل *, div, #id, .class، وكيفية استخدامها لاستهداف عناصر محددة. كما استعرضنا Selectors المتقدمة مثل >, +, ~، و:hover، والتي تمنحك تحكمًا دقيقًا في تطبيق الأنماط.
فهم هذه المحددات يساعد في تنظيم تصميم الصفحات بشكل أفضل وجعل الأكواد أكثر فعالية وسهولة في الصيانة. في الدروس القادمة، سنتعلم كيفية التحكم في الألوان والخطوط باستخدام CSS.
أسئلة شائعة (FAQ)
1. ما الفرق بين المحدد + والمحدد ~؟
المحدد + يستهدف الشقيق المباشر فقط، بينما ~ يستهدف جميع الأشقاء بعد العنصر المستهدف.
2. متى يُفضل استخدام المعرفات (IDs)؟
يُفضل استخدام المعرفات عندما يكون العنصر فريدًا ولا يتكرر في الصفحة.
3. هل يمكن الجمع بين عدة محددات؟
نعم، يمكنك دمج المحددات للحصول على تحكم دقيق. مثال:
div.container > p:first-child {
color: red;
}