المحددات

بودكاست CSS - 002: أدوات الاختيار

إذا كان لديك نص تريد أن يكون أكبر حجمًا وأن يظهر باللون الأحمر فقط إذا كانت هذه هي الفقرة الأولى من المقالة، فكيف تفعل ذلك؟

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

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

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

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

أجزاء قاعدة CSS

لفهم آلية عمل أدوات الاختيار ودورها في CSS، من المهمّ معرفة أجزاء قاعدة CSS. قاعدة CSS هي مجموعة من الرموز البرمجية تحتوي على أداة اختيار واحدة أو أكثر وإعلان واحد أو أكثر.

في قاعدة CSS هذه، يكون أداة الاختيار هي .my-css-rule التي تعثر على جميع العناصر ضمن الفئة my-css-rule في الصفحة. هناك ثلاثة تصريحات بين الأقواس المعقوفة. التعريف هو زوج من الخصائص والقيمة يطبّق الأنماط على العناصر المتطابقة من خلال أدوات الاختيار. يمكن أن تحتوي قاعدة CSS على أي عدد تريده من التعريفات وأدوات الاختيار.

أدوات اختيار بسيطة

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

أداة اختيار شاملة

يطابق المحدد العام، المعروف أيضًا باسم حرف البدل، أي عنصر.

* {
  color: hotpink;
}

وتؤدي هذه القاعدة إلى تضمين نص Hotpink في كل عنصر HTML على الصفحة.

أداة اختيار النوع

تتطابق أداة اختيار النوع مع عنصر HTML مباشرةً.

section {
  padding: 2em;
}

تؤدي هذه القاعدة إلى أن يحتوي كل عنصر <section> على 2em من padding من جميع الجوانب.

أداة اختيار الفئة

يمكن أن يحتوي عنصر HTML على عنصر واحد أو أكثر محدّد في السمة class. تتطابق classselect مع أي عنصر تم تطبيق الفئة عليه.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

أي عنصر تم تطبيق الفئة عليه سيحصل على لون أحمر:

.my-class {
  color: red;
}

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

ستتم مطابقة عنصر HTML الذي يتضمن الفئة .my-class مع قاعدة CSS أعلاه، حتى إذا كانت تحتوي على عدة فئات أخرى، على النحو التالي:

<div class="my-class another-class some-other-class"></div>

ويرجع ذلك إلى أنّ خدمة CSS تبحث عن سمة class تحتوي على الفئة المحدّدة، بدلاً من تطابق تلك الفئة تمامًا.

أداة اختيار المعرّف

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

#rad {
  border: 1px solid blue;
}

ستطبق CSS هذه حدًا أزرق على عنصر HTML الذي يحتوي على id من rad، على النحو التالي:

<div id="rad"></div>

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

أداة اختيار السمات

يمكنك البحث عن العناصر التي تتضمن سمة HTML معيّنة أو قيمة معيّنة لسمة HTML، باستخدام أداة اختيار السمات. يمكنك توجيه CSS للبحث عن السمات من خلال وضع أداة الاختيار بين قوسَين مربّعين ([ ]).

[data-type='primary'] {
  color: red;
}

تبحث صفحات الأنماط المتتالية (CSS) هذه عن جميع العناصر التي تحتوي على سمة data-type مع القيمة primary، على النحو التالي:

<div data-type="primary"></div>

وبدلاً من البحث عن قيمة data-type معيّنة، يمكنك أيضًا البحث عن عناصر تتضمّن السمة الحالية، بغض النظر عن قيمتها.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

سيحتوي كلا عنصرَي <div> على نص باللون الأحمر.

يمكنك استخدام أدوات اختيار السمات الحساسة لحالة الأحرف عن طريق إضافة عامل التشغيل s إلى أداة اختيار السمات.

[data-type='primary' s] {
  color: red;
}

وهذا يعني أنّه إذا تضمّن عنصر HTML data-type للسمة Primary، بدلاً من primary، لن يظهر له نص باللون الأحمر. ويمكنك عكس ذلك، أي حساسية حالة الأحرف، باستخدام عامل التشغيل i.

إلى جانب عوامل تشغيل الحالة، يمكنك الوصول إلى العوامل التي تطابق أجزاء من السلاسل داخل قيم السمات.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

أدوات اختيار التجميع

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

strong,
em,
.my-class,
[lang] {
  color: red;
}

يعمل هذا المثال على تمديد تغيير اللون إلى كل من عناصر <strong> وعناصر <em>. وتشمل أيضًا فئة تُسمّى .my-class وعنصرًا يحتوي على السمة lang.

التحقّق من استيعابك

اختبر معلوماتك عن أدوات الاختيار البسيطة

* {}

div {}

الفئات الزائفة والعناصر الزائفة

توفّر CSS أنواع أدوات اختيار مفيدة تركّز على حالة معيّنة للنظام الأساسي، مثلاً عند التمرير فوق عنصر أو البُنى داخل عنصر أو أجزاء من عنصر.

الفئات الزائفة

عناصر HTML تجد نفسها في حالات مختلفة، إما بسبب التفاعل معها، أو أن أحد العناصر التابعة لها في حالة معينة.

على سبيل المثال، يمكن للمستخدم تمرير مؤشر الماوس فوق عنصر HTML أو تمرير مؤشر الماوس فوق عنصر ثانوي أيضًا. في تلك الحالات، استخدِم الفئة الزائفة في :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

يمكنك الاطّلاع على المزيد من المعلومات في وحدة الفئات الزائفة.

عنصر زائف

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

.my-element::before {
  content: 'Prefix - ';
}

كما في العرض التوضيحي السابق، حيث بدأت قبل تصنيف رابط بنوع الملف، يمكنك استخدام العنصر الزائف ::before لإدراج محتوى في بداية العنصر، أو العنصر الزائف ::after لإدراج محتوى في نهاية العنصر.

ومع ذلك، لا تقتصر العناصر الزائفة على إدراج المحتوى. يمكنك أيضًا استخدامها لاستهداف أجزاء معينة من عنصر. على سبيل المثال، لنفترض أن لديك قائمة. استخدِم ::marker لاختيار نمط كل نقطة تعداد (أو رقم) في القائمة.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

يمكنك أيضًا استخدام ::selection لاختيار نمط المحتوى الذي تم تمييزه من خلال المستخدم.

::selection {
  background: black;
  color: white;
}

تعرَّف على مزيد من المعلومات في وحدة حول العناصر الزائفة.

التحقّق من استيعابك

اختبار معلوماتك حول أدوات الاختيار الزائفة

p:hover {
  background: white;
  color: black;
}

أدوات اختيار معقّدة

لقد اطّلعت على مجموعة كبيرة من أدوات الاختيار، ولكن أحيانًا ستحتاج إلى المزيد من التحكّم الدقيق في خدمة مقارنة الأسعار (CSS). وهنا تتدخل أدوات الاختيار المعقدة للمساعدة.

تجدر الإشارة إلى أنّه في هذه المرحلة، على الرغم من أنّ أدوات الاختيار التالية تمنحنا المزيد من القوة، لا يمكننا إلا التتالي لأسفل واختيار العناصر الفرعية. لا يمكننا الاستهداف لأعلى وتحديد عنصر رئيسي. وسنتناول تعريف الشلال وآلية عمله في درس لاحق.

أجهزة الدمج

أداة الدمج هي ما يقع بين محددتين. على سبيل المثال، إذا كان المُحدِّد عبارة عن p > strong، يكون المُدمج هو الحرف >. تساعدك المحددات التي تستخدم هذه المجموعات في تحديد العناصر بناءً على موضعها في المستند.

أداة دمج تابعة

لفهم المجموعات التابعة، تحتاج أولاً إلى فهم العناصر الرئيسية والفرعية.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

العنصر الرئيسي هو <p> الذي يحتوي على نص. وداخل العنصر <p> هذا هو عنصر <strong>، ما يجعل محتواه غامقًا. ولأنّه داخل <p>، فهو عنصر ثانوي.

يسمح لنا المُدمج التابع باستهداف عنصر ثانوي. يستخدم هذا الإجراء مسافة () لتوجيه المتصفح للبحث عن العناصر الثانوية:

p strong {
  color: blue;
}

يختار هذا المقتطف جميع عناصر <strong> التي هي عناصر فرعية لعناصر <p> فقط، ما يجعلها زرقاء بشكل متكرر.

يظهر هذا التأثير بشكل أفضل في المثال أعلاه، باستخدام أداة اختيار المركّبات .top div. تضيف قاعدة CSS هذه مساحة متروكة يسرى إلى عناصر <div> هذه. بما أنّ أداة الدمج متكرّرة، سيتم تطبيق المساحة المتروكة نفسها على جميع عناصر <div> المضمّنة في .top.

ألقِ نظرة على لوحة HTML في هذا العرض التوضيحي لمعرفة كيف يحتوي العنصر .top على عدة عناصر <div> فرعية تتضمّن بدورها عناصر فرعية <div>.

وحدة الدمج التابعة التالية

يمكنك البحث عن عنصر يتبع عنصرًا آخر مباشرةً باستخدام حرف + في أداة الاختيار.

لإضافة مسافة بين العناصر المكدسة، يمكنك استخدام المجمِّع التابع التالي لإضافة مسافة فقط إذا كان العنصر هو المطابق التالي لعنصر ثانوي في .top.

يمكنك إضافة هامش إلى جميع العناصر الفرعية في .top، باستخدام أداة الاختيار التالية:

.top * {
  margin-top: 1em;
}

تكمن المشكلة في أنك تختار كل عنصر ثانوي في .top، وقد تؤدي هذه القاعدة إلى إنشاء مساحة إضافية غير ضرورية. لا يتيح لك التركيبة التابعة التالية، المختلطة مع أداة الاختيار العام، التحكم في العناصر التي تحصل على مساحة، بالإضافة إلى تطبيق مسافة على أي عنصر. يوفّر لك هذا بعض المرونة على المدى الطويل، بغض النظر عن عناصر HTML التي تظهر في .top.

المُجمِّع الشقيق اللاحق

وتشبه أداة الدمج التالية إلى حد كبير أداة الاختيار التابعة التالية. وبدلاً من الحرف +، استخدِم الحرف ~. وكيف يختلف ذلك هو أن العنصر يجب فقط أن يتبع عنصرًا آخر مع نفس الأصل، بدلاً من أن يكون العنصر التالي مع نفس الأصل.

توفّر أداة الدمج التالية هذه صرامة أقل قليلاً، وهذا أمر مفيد في سياقات مثل النموذج أعلاه، حيث نغير لون مفتاح تبديل مخصّص عندما يكون مربّع الاختيار المرتبط به بالحالة :checked.

مجمّع ثانوي

تمنحك أداة الدمج الفرعية (المعروفة أيضًا باسم التابع المباشر) مزيدًا من التحكّم في عملية التكرار التي تتوفّر مع أدوات اختيار المجموعات. عند استخدام الحرف >، أنت تفرض قيودًا على أداة اختيار المركّبات بحيث يتم تطبيقها فقط على العناصر الثانوية المباشرة.

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

للحدّ من هذه المشكلة، عليك تغيير أداة الاختيار التابعة التالية لتضمين أداة تركيب فرعية: > * + *. ستنطبق القاعدة الآن فقط على توجيه العناصر الثانوية من .top.

أدوات اختيار المركّبات

يمكنك الجمع بين أدوات الاختيار لزيادة الدقة وسهولة القراءة. على سبيل المثال، لاستهداف عناصر <a> التي تتضمّن فئة .my-class أيضًا، اكتب ما يلي:

a.my-class {
  color: red;
}

لن يؤدي ذلك إلى تطبيق اللون الأحمر على جميع الروابط، وسيطبّق أيضًا اللون الأحمر على .my-class if كان على عنصر <a>. لمزيد من المعلومات حول هذا الموضوع، راجع وحدة الخصوصية.

التحقّق من استيعابك

اختبار معلوماتك عن أدوات الاختيار المعقدة

section.awesome {
  border: 1px solid hotpink;
}

المراجِع

• مرجع أدوات اختيار لغة CSS
• لعبة أدوات الاختيار التفاعلية
• مرجع العناصر الزائفة والعناصر الزائفة
• أداة ترجمة أدوات اختيار لغة CSS إلى تفسيرات باللغة الإنجليزية العادية