المحددات

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

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

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

أداة اختيار عامة

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

* {
  color: hotpink;
}

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

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

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

section {
  padding: 2em;
}

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

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

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

<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;
}

تبحث خدمة مقارنة الأسعار هذه عن كل العناصر التي تحتوي على السمة 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 إذا كان العنصر على <a> فقط. لمعرفة المزيد من المعلومات عن هذا الأمر، يمكنك الاطّلاع على وحدة المواصفات.

التحقق من فهمك

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

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

الموارد

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