المحددات

The CSS Podcast - 002: Selectors

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

<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.

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

Browser Support

• 1
• 12
• 1
• 1

Source

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

* {
  color: hotpink;
}

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

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

Browser Support

• 1
• 12
• 1
• 1

Source

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

section {
  padding: 2em;
}

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

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

Browser Support

• 1
• 12
• 1
• 1

Source

يمكن أن يحتوي عنصر 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 تحتوي على الفئة المحدّدة، بدلاً من مطابقة تلك الفئة تمامًا.

ملاحظة: يمكن أن تكون قيمة سمة الفئة أيّ قيمة تريدها تقريبًا. من الأمور التي قد تؤدي إلى حدوث خطأ أنّه لا يمكنك بدء فئة (أو معرّف) برقم، مثل .1element. يمكنك الاطّلاع على مزيد من المعلومات في المواصفة.

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

Browser Support

• 1
• 12
• 1
• 1

Source

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

#rad {
  border: 1px solid blue;
}

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

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

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

ملاحظة: إذا صادف المتصفّح أكثر من مثيل واحد من id، سيظلّ يطبّق أي قواعد CSS تتطابق مع عنصر الاختيار. ومع ذلك، من المفترض أن يكون لأي عنصر يتضمّن سمة id قيمة فريدة له، لذا تجنَّب تطبيق الأنماط باستخدام أداة الاختيار id ما لم تكن تكتب أسلوب CSS محدّدًا جدًا لعنصر واحد، لأنّ ذلك يعني أنّه لا يمكنك إعادة استخدام هذه الأنماط في مكان آخر.

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

Browser Support

• 1
• 12
• 1
• 3

Source

يمكنك البحث عن العناصر التي تحتوي على سمة 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;
}

في هذا العرض التوضيحي، تحصل عامل التشغيل `$` في أداة اختيار السمات على نوع الملف من سمة href. يتيح ذلك إضافة بادئة إلى التصنيف استنادًا إلى نوع الملف باستخدام عنصر زائف.

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

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

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

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

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

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

* {}

ما هو نوع أداة الاختيار البسيطة المستخدَمة في المقتطف أعلاه؟

سمة

يتم استخدام [] لأدوات اختيار السمات البسيطة.

رقم التعريف

تُستخدَم # لأدوات الاختيار البسيطة للمعرّفات.

عالمية

* هو أداة الاختيار البسيطة العامة.

صنف

تُستخدَم . لأدوات الاختيار البسيطة للصف.

div {}

ما هو نوع أداة الاختيار البسيطة المستخدَمة في المقتطف أعلاه؟

صنف

يتم استخدام . لأدوات الاختيار البسيطة للصف.

كتابة

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

سمة

تُستخدَم الأقواس المربّعة [] لأدوات اختيار السمة البسيطة.

رقم التعريف

يتم استخدام # لأدوات الاختيار البسيطة للمعرّفات.

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

توفّر لغة 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. تختلف العناصر الزائفة أيضًا من حيث البنية عن الفئات الزائفة، لأنّنا نستخدم علامة نقطتَين رأسيتَين (::) بدلاً من علامة نقطة واحدة (:).

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

.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` لإنشاء عنصر تبديل خالص من CSS.

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

عنصر تركيبي فرعي

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

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

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

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

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

a.my-class {
  color: red;
}

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

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

اختبِر معلوماتك عن المحدّدات المعقّدة

أيّ من الرموز التالية ليس عنصرًا مركبًا لاختيار العناصر؟

>

عنصر تركيب السليل المباشر

÷

غير صالح، وليس رمز CSS

+

عنصر الربط التالي للأخ.

*

هذه أداة اختيار بسيطة عامة.

.

أداة اختيار الفئة البسيطة

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

أداة الاختيار أعلاه هي مثال على...

أداة الدمج

رمز يُستخدَم لدمج أدوات الاختيار في أداة أكثر تحديدًا.

أداة اختيار المركبات

عند استخدام عنصرَي اختيار أو أكثر معًا، بدون عنصر تركيب، لإنشاء عنصر اختيار أكثر تحديدًا.

Terminator

ليس نوع أداة اختيار، ولكن يبدو أنّه كذلك، أليس كذلك؟ 🤖

الموارد

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