كيفية استخدام محددات CSS لتنسيق صفحات الويب باحتراف

ما هي محددات CSS ولماذا تعد أساسية؟

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

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

وتنقسم محددات CSS غالباً إلى عدة فئات رئيسية، من أبرزها:

• المحددات البسيطة Simple Selectors
• محددات الدمج Combinator Selectors
• محددات الأصناف الزائفة Pseudo-class Selectors
• محددات العناصر الزائفة Pseudo-element Selectors
• محددات السمات Attribute Selectors

ولبناء أساس قوي في التنسيق، من الأفضل أن تبدأ بالمحددات الأساسية أولاً، ثم تنتقل بعد ذلك إلى المحددات المتقدمة التي تمنحك دقة أعلى ومرونة أكبر.

محددات CSS الأساسية

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

محدد العنصر Element Selector

يستهدف هذا المحدد عناصر HTML بناءً على اسم الوسم نفسه، مثل h1 أو p أو article. وعند استخدامه، فإن التنسيق يطبَّق على جميع العناصر من النوع نفسه داخل الصفحة.

/* selecting all h3 elements */
h3 {
  text-align: center;
  color: blue;
}

/* selecting all article elements */
article {
  font-size: 14px;
  line-height: 1.1px;
}

في المثال السابق، سيجري تنسيق جميع عناصر h3 وجميع عناصر article بالقيم المحددة. هذا النوع مفيد عندما تريد توحيد نمط نوع معين من العناصر في الموقع كله.

محدد المعرّف id Selector

يُستخدم محدد id لاستهداف عنصر واحد يحمل قيمة معرّف فريدة. وبما أن كل قيمة id يجب أن تكون فريدة داخل الصفحة، فإن هذا المحدد مناسب للعناصر الفردية التي تحتاج إلى تنسيق خاص.

تكتب هذا المحدد باستخدام الرمز # متبوعاً باسم id.

#projects-flex-container {
  width: 90vw;
  display: flex;
}

هذا المثال يستهدف العنصر الذي يحمل id باسم projects-flex-container فقط. ومع ذلك، يُنصح بعدم الإفراط في استخدام هذا النوع عندما يكون من الممكن الاعتماد على class الأكثر مرونة وقابلية لإعادة الاستخدام.

محدد الصنف Class Selector

يُعد محدد class من أكثر المحددات استخداماً، لأنه يسمح لك بتطبيق نفس التنسيق على عدة عناصر تشترك في نفس الفئة. وهو مثالي لعناصر مثل البطاقات، والأزرار، والصور، ومكونات الواجهة المتكررة.

تتم كتابته باستخدام النقطة . متبوعة باسم الفئة.

.project-card {
  color: #badA55;
  padding: 5px;
  border-radius: 5px;
}

كل عنصر يحمل الفئة project-card سيحصل على هذه الأنماط، وهذا ما يجعل محدد class خياراً عملياً في المشاريع الحقيقية.

المحدد الشامل Universal Selector

يستهدف المحدد الشامل جميع عناصر الصفحة دون استثناء. ويُستخدم عادةً لإعادة ضبط بعض الخصائص الأساسية مثل margin وpadding من أجل تحقيق اتساق بصري بين العناصر والمتصفحات.

* {
  margin: 0;
  padding: 0;
}

هذا الأسلوب شائع في بداية ملفات التنسيق، خاصة عند إنشاء قاعدة موحدة قبل بناء بقية الواجهة.

كيفية تجميع المحددات في CSS

تجميع المحددات من الممارسات المهمة لكتابة كود أنظف وأسهل في القراءة والصيانة. عندما تكون عدة عناصر تشترك في نفس الخصائص، يمكنك جمعها في قاعدة واحدة بدلاً من تكرار نفس التنسيق لكل عنصر.

h1 {
  text-align: left;
  letter-spacing: 3px;
  color: #111111;
}

h2 {
  text-align: left;
  letter-spacing: 3px;
  color: #111111;
}

h3 {
  text-align: left;
  letter-spacing: 3px;
  color: #111111;
}

يمكن اختصار الكود السابق من خلال فصل المحددات بفاصلة , كما يلي:

h1, h2, h3 {
  text-align: left;
  letter-spacing: 3px;
  color: #111111;
}

وإذا كانت هناك خصائص مشتركة وأخرى خاصة بكل عنصر، يمكنك جمع المشترك أولاً ثم إضافة القواعد الفردية لاحقاً:

/* group shared styles */
h1, h2, h3 {
  text-align: left;
  letter-spacing: 3px;
  color: #111111;
}

/* individual styles */
h1 {
  font-size: 72px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 32px;
}

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

محددات CSS المتقدمة

عندما تحتاج إلى استهداف عناصر بدقة أكبر، أو التعامل مع حالات معينة داخل الصفحة، تظهر أهمية المحددات المتقدمة. وهي تمنحك تحكماً أوسع في البنية الداخلية للعناصر وعلاقتها ببعضها بعضاً.

محددات السمات Attribute Selectors

تتيح لك محددات السمات استهداف العناصر بناءً على وجود سمة معينة أو قيمة محددة داخلها. والمقصود بالسمة هنا أي خاصية داخل وسم HTML الافتتاحي مثل id أو href أو title أو value.

<a title="Learn to code for free!" href="https://www.freecodecamp.org/">
  Learn to code
</a>

الصيغة العامة لهذا النوع تكون باستخدام الأقواس المربعة [] بعد المحدد:

selector[attribute]

فيما يلي أشهر الأنواع العملية لمحددات السمات:

محدد وجود السمة Present Attribute Selector

يستهدف أي عنصر يحتوي على سمة محددة، بغض النظر عن قيمة تلك السمة.

a[title] {
  color: khaki;
  background: grey;
}

في هذا المثال، ستُنسق جميع روابط a التي تحتوي على السمة title فقط.

محدد القيمة المطابقة تماماً Equals Selector

يستهدف العنصر الذي تساوي فيه قيمة السمة قيمة محددة بشكل دقيق.

a[href="https://peterlunch.com/"] {
  color: purple;
}

هذا يعني أن التنسيق سيطبَّق فقط على الروابط التي تحمل نفس قيمة href تماماً.

محدد البداية Begins With Selector

يفيد هذا المحدد عندما تريد استهداف العناصر التي تبدأ فيها قيمة السمة بنص معين، ويُكتب باستخدام ^=.

a[href^="https"] {
  color: yellow;
  text-decoration: none;
}

في المثال أعلاه، ستُنسق الروابط التي تبدأ قيمة href فيها بـ https.

محدد النهاية Ends With Selector

يعمل بالعكس من المحدد السابق، حيث يستهدف العناصر التي تنتهي قيمة السمة فيها بنص محدد، ويُكتب باستخدام $=.

img[src$="/blog-imgs"] {
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

هذا النوع مفيد جداً عندما تعتمد على نمط ثابت في أسماء الملفات أو المسارات.

محدد الاحتواء Contains Selector

يستهدف العناصر التي تحتوي قيمة السمة فيها على جزء معين من النص، ويُكتب باستخدام *=.

a[href*="peterlunch"] {
  color: green;
}

إذا كانت قيمة href تتضمن النص peterlunch في أي موضع، فسيتم تطبيق التنسيق عليها.

محددات الدمج Combinator Selectors

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

<div> <!-- parent -->
  <p><!-- div child --></p>
  <article> <!-- div child, parent to h1 & p -->
    <h1></h1>
    <p></p>
  </article>
  <article>
    <h1></h1>
    <p></p>
    <p></p>
  </article>
</div>

محدد السليل Descendant Selector

يختار كل عنصر يقع داخل عنصر آخر، سواء كان ابناً مباشراً أو غير مباشر.

div p {
  line-height: 2em;
}

هذا يعني تنسيق جميع عناصر p الموجودة داخل أي عنصر div.

محدد الابن المباشر Child Selector

يستهدف الأبناء المباشرين فقط، وليس كل العناصر المتداخلة. ويُكتب باستخدام الرمز >.

div > p {
  color: aquamarine;
}

هنا سيجري تنسيق عناصر p المرتبطة مباشرة بالعنصر div فقط، دون الفقرات الموجودة داخل article.

محدد الأخ الشقيق المجاور Adjacent Sibling Selector

يختار العنصر الذي يأتي مباشرة بعد عنصر آخر على نفس المستوى، ويُكتب باستخدام +.

img + p {
  font-size: 10px;
  color: grey;
  font-style: italic;
}

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

محدد الأشقاء العام General Sibling Selector

يستهدف جميع العناصر الشقيقة التي تأتي بعد عنصر معين على نفس المستوى، ويُكتب باستخدام ~.

article ~ h1 {
  font-weight: 900;
}

سيؤثر هذا التنسيق على جميع عناصر h1 التي تُعد أشقاء للعنصر article ضمن نفس الحاوية.

المحددات الزائفة في CSS

تنقسم المحددات الزائفة إلى نوعين رئيسيين: محددات الأصناف الزائفة Pseudo-classes ومحددات العناصر الزائفة Pseudo-elements. ويُستخدم كل نوع لتحقيق هدف مختلف.

الأصناف الزائفة Pseudo-class Selectors

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

button:hover {
  background: red;
}

في هذا المثال، سيتغير لون خلفية الزر عندما يمر المستخدم بالمؤشر فوقه. هذا النوع مهم جداً لتحسين تجربة الاستخدام وإضافة تفاعل بصري واضح.

العناصر الزائفة Pseudo-element Selectors

أما العناصر الزائفة فتُستخدم لاستهداف جزء من العنصر نفسه، مثل أول حرف أو أول سطر أو المحتوى الذي يظهر قبل العنصر أو بعده. ويُكتب هذا النوع باستخدام نقطتين مزدوجتين ::.

p {
  width: 600px;
  line-height: 1.5;
  font-weight: 500;
}

p::first-letter {
  color: white;
  background-color: rgb(55, 97, 117);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(212, 173, 81);
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

هذا المثال ينسق أول حرف في كل فقرة بطريقة بارزة، وهو أسلوب شائع في المقالات الطويلة والمجلات الرقمية.

أفضل ممارسات استخدام محددات CSS

• استخدم class للعناصر المتكررة بدلاً من الاعتماد الزائد على id.
• حافظ على بساطة المحددات لتسهيل القراءة والصيانة.
• تجنب التعقيد المفرط في محددات الدمج حتى لا يصبح الكود هشاً وصعب التعديل.
• استفد من تجميع المحددات لتقليل التكرار.
• استخدم المحددات المتقدمة عند الحاجة الفعلية فقط، وليس لمجرد الإمكان.

الخلاصة التقنية

فهم محددات CSS لا يقتصر على حفظ الصيغ، بل يتعلق بقدرتك على اختيار الطريقة الأنسب لاستهداف العناصر بدقة وكفاءة. المحددات الأساسية تمنحك قاعدة قوية لبدء أي مشروع، بينما تساعدك المحددات المتقدمة على بناء واجهات أكثر مرونة واحترافية. وكلما أحسنت استخدام CSS Selectors بشكل منظم، أصبح الكود أسهل في التطوير وأفضل في الأداء والصيانة على المدى الطويل.