تعلم تطوير الويب أنواع محددات التنسيق في CSS

تُستخدَم المحددات في CSS لاستهداف عناصر HTML في صفحة الويب التي نريد تنسيقها، كما تتيح هذه اللغة مجموعةً متنوعةً من هذه المحددات التي تمكننا من اختيار العناصر التي ننوي تنسيقها بدقة، وسنناقش في هذا المقال والمقالات الفرعية المتعلقة به الأنواع المختلفة للمحددات بتفاصيل أكثر، لنقف على آلية عملها، كما ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب.
• أساسيات تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب.
• أساسيات التعامل مع الملفات.
• فكرة عن أساسيات HTML.
• فكرة عن أساسيات عمل CSS

تعرف على محددات CSS

المحدد selector هو القسم الأول من قاعدة CSS، وهو يمثل نمطًا من العناصر أو العبارات الأخرى التي تدل المتصفح على عناصر HTML التي يجب تطبيق قاعدة CSS عليها، كما تُعرف العناصر التي يختارها المحدد باسم أغراض المحدد.

تعرَّفنا في مقالات سابقة على بعض أنواع المحددات وتعلمنا وجود محددات تستهدف ملف HTML بطرق مختلفة مثل اختيار عنصر مثل h1 أو صنف مثل special..

عُرِّفت المحددات في لغة CSS ضمن مواصفات اللغة، وتحتاج مثل غيرها من الأجزاء إلى دعم المتصفحات لها كي تعمل بالصورة الصحيحة، كما ستجد أنّ معظم المحددات التي نتعامل معها في هذه السلسلة معرّفة في توصيفات المحددات من المستوى الثالث، وهي مواصفات مطبّقة، وبالتالي ستجد دعمًا ممتازًا لها من قبل معظم المتصفحات.

قوائم المحددات

إذا أردت تطبيق تنسيق CSS نفسه على أكثر من غرض، فيمكن عندها ضم المحددات الخاصة بهذه الأغراض في قائمة محددات selector list لكي تُطبق القاعدة عليها جميعًا، فإذا كان لديك مثلًا التنسيق نفسه للعنصر h1 وللصنف special.، فسيمكن كتابة قاعدتين منفصلتين كما يلي:

h1 {
  color: blue;
}

.special {
  color: blue;
}

كما يمكن ضم المحددين في قاعدة واحدة كما يلي:

h1, .special {
  color: blue;
}

لاحظ استخدام الفاصلة (,) بين عناصر قائمة المحددات، وتُعدّ المسافة الفارغة بعد أو قبل الفاصلة أمرًا مقبولًا، وقد يجد البعض أن كتابة قائمة المحددات بالشكل التالي أسهل قراءةً:

h1,
.special {
  color: blue;
}

حاول ضم المحددين اللذين يمتلكان التصريحات نفسها في المثال التالي، وينبغي ألا يتغير مظهر الصفحة في محرر الشيفرة التفاعلي إذا نجحت في ضم المحددين.

إذا جمّعت المحددات بهذه الطريقة وكان أحدها مكتوبًا بطريقة خاطئة، فسيتجاهل المتصفح هذه القاعدة برمتها، لاحظ كيف سيتجاهل المتصفح في المثال التالي القاعدة الثانية (محدد الصنف) لأنها خاطئة، لكنه سيطبق القاعدة الأولى h1 لأنها صحيحة:

h1 {
  color: blue;
}

..special {
  color: blue;
}

لكن عندما تحاول ضم القاعدتين في قاعدة واحدة كونهما يضمان التصريح ذاته، سيتجاهل المتصفح القاعدة بأكملها، فلن يُطبّق التنسيق على العنصر h1 ولا على العناصر التي تمتلك الصنف special..

h1, ..special {
  color: blue;
}

أنواع المحددات

تقدِّم لك CSS مجموعات مختلفة من المحددات، وستساعدك معرفة الأنواع في إيجاد الطريقة الصحيحة لتطبيق التنسيق، وسنستعرض تاليًا عناوين المقالات الفرعية التي تُفصّل لاحقًا كل نوع من المحددات:

محددات النوع والصنف والمعرف

تضم هذه المجموعة المحددات التي تستهدف عناصر HTML وتعرف باسم محددات الأنواع type selectors مثل <h1>

h1 { }

وتضم أيضًا المحددات التي تستهدف الصنف class selectors:

.box { }

بالإضافة إلى المحددات التي تستهدف المعرّف ID selectors

#unique {
}

محددات الخاصيات

تتيح لك محددات الخاصيات طرقًا عدة لاختيار العناصر بناءً على وجود سمة أو خاصية معينة فيها:

a[title] {
}

أو اختيار العناصر بناءً على وجود خاصية لها قيمة محددة:

a[href="https://example.com"]
{
}

العناصر المجردة والأصناف المجردة

تضم هذه المجموعة الأصناف الوهمية pseudo-classes التي تنسق العناصر في حالات محددة، إذ يختار المحدد hover: مثلًا العنصر <a> عندما يمر فوقه مؤشر الفأرة فقط:

a:hover {
}

كما تضم أيضًا محددات العناصر المجردة pseudo-elements التي تختار جزءًا محددًا من العنصر بدلًا من العنصر نفسه، إذ يختار المحدد first-line:: مثلًا السطر الأول من نص داخل فقرة نصية <p> ويعمل وكأنه عنصر <span> يُغلِّف السطر الأول ثم يختاره:

p::first-line {
}

المجمعات Combinators

تضم المجموعة الأخيرة من المحددات محددات أخرى لكي تستهدف عناصر الصفحة، على سبيل المثال نستخدم محددات العناصر الأبناء إذا أردنا تطبيق التنسيق على أبناء عنصر معين، تختار القاعدة التالية مثلًا الفقرات النصية التي تأتي كأبناء مباشرين للعنصر <article> باستخدام محدد الأبناء(‎>‎?

article > p {
}

جدول مرجعي إلى المحددات

يعرض لك الجدول التالي المحددات التي يمكنك استخدامها مع روابط إلى المقالات التي تتحدث عنها. كما ضمّنا هذا الجدول روابطًا إلى موسوعة حسوب لمزيد من المعلومات عن كل محدد.

يمكنك العودة إلى هذا المرجع عندما تحتاج إلى البحث عن محددات خلال مسيرة تعلمك.

الخلاصة

تعرفت في هذه المقالة على الأنواع الأساسية لمحددات CSS التي تمكنك من استهداف عناصر HTML معينة وتطبيق قواعد تنسيق عليها، سنشرح في الدروس اللاحقة من هذه السلسلة كل نوع من هذه الأنواع بمزيد من التفصيل مع الأمثلة العملية.

ترجمة -وبتصرف- للمقال CSS selectors

اقرأ أيضا

• المقال السابق: التعاقب والتخصيص والوراثة في CSS.
• كيفية فهم وإنشاء قواعد CSS
• كيفية بناء موقع باستخدام CSS
• المحددات (Selectors) في CSS