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

هذه المقالة ستكون مرجع سريع لمحددات الـ CSS بمختلف أنواعها “محددات الأنواع، محددات الأصناف، محددات الخاصيات” وغيرها من أنواع المحددات، وكيف نصل إلى عنصرما بشكل صحيح وبكل يسر وسلاسة.

محددات الأنواع “Type Selectors”

يستخدم هذا المحدد لمطابقة العناصر وفق اسم العقدة “DOM”، أي أنه يحدد جميع العناصر التي لها نوع معين في المستند، مثل p و div و span أو حتى العناصر المخصصة.

custom {
  border: 1px solid black;
}

p {
  color: green;
}
<custom>Custom element</custom>

<p>Paragraph</p>

محددات الأصناف “Class Selectors”

يتم استخدامها لتحديد العناصر وفق قيمة الخاصية class التابعة لها، حيث يمكنك عند استخدامها تطبيق النمط على كافة العناصر التي تحمل نفس القيمة للخاصية class، كما في المثال التالي:

.bordered {
  border: 1px solid red;
}
<div class="bordered">
    Bordered element.
</div>

محددات الخاصيات “Attribute selectors”

يستخدم هذا المحدد لتحديد العناصر التي تحتوي على خاصية ما، أو كانت تحتوي على خاصية وهذه الخاصية تحوي قيمة معينة كما في المثال التالي:


[name] {
  background-color: green;
}

[name="age"] {
  background-color: red;
}
<input type="text" name="name" placeholder="Your name" />
<input type="number" name="age" placeholder="Your age" />

في هذا المثال، يمكنك ملاحظة أنه في البداية قمنا بإنشاء محدد لجميع العناصر التي تحتوي على الخاصية name “بغض النظر عن قيمة هذه الخاصية”، بعد ذلك قمنا بإنشاء محدد أكثر دقة حيث قمنا بتحديد العناصر التي تحتوي على الخاصية name وتحمل القيمة age

يمكنك أيضاً استخدام صيغ مختلفة لمطابقة قيمة الخاصية، بخلاف استخدام علامة =

[attr~=value] : تحديد العنصر الذي له خاصية باسم attr، التي قيمتها قد تحتوي على قائمة مفصولة بفراغات من القيم، وإحدى تلك القيم تساوي value

[attr|=value] : تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تساوي value أو تبدأ بالقيمة value وتتبعها مباشرةً شرطة -، وتُستخدَم هذه الصيغة غالبًا لمطابقة رموز اللغات الفرعية

[attr^=value] : تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تبدأ بالسلسلة النصية value.

[attr$=value] : تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تنتهي بالسلسلة النصية value.

[attr*=value] : تحديد العنصر الذي له خاصية باسم attr، التي قيمتها تحتوي على السلسلة النصية value مرة واحدة على الأقل.

[attr operator value i] : إضافة الحرف i (أو I) قبل قوس الإغلاق يؤدي إلى مطابقة القيمة بغض النظر عن حالة الأحرف (case-insensitive).

/* [attr~=value] */
[class~="bordered"] {
  border: 3px solid green;
}

/* [attr|=value] */
[class|="primary"] {
  color: green;
}

/* [attr^=value] */
[class^="call"] {
  color: green;
}

/* [attr$=value] */
[class$="ed"] {
  background-color: pink;
}

/* [attr*=value] */
[class*="prim"] {
  background-color: pink;
}
<!-- [attr~=value] -->
<button class="btn bordered">Click Here</button>

<!-- [attr|=value] -->
<button class="primary-btn">Click Here</button>
<p class="primary">Paragraph</p>

<!-- [attr^=value] -->
<button class="caller">Caller</button>
<button class="called">Called</button>
<button class="calling">Calling</button>

<!-- [attr$=value] -->
<div class="required">
    <p>Required</p>
</div>
<div class="validated">
    <p>Validated</p>
</div>

<!-- [attr*=value] -->
<button class="btn-primary">Click here</button>

محددات المُعرِّفات “ID selectors”

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

#d123 {
  font-weight: bold;
}
<div>block without ID</div>
<div id="d123">block with ID of d123</div>

المحدد العام “Universal selector”

يستخدم هذا المحدد لتحديد جميع العناصر.

* {
  border: 1px solid yellow;
}
<ul>
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>
    <span>Item 5</span>
  </li>
</ul>

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

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

‎:focusالعناصر (مثل عناصر النماذج) التي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح.
‎:activeالعناصر (مثل الأزرار) التي جرى تفعيلها من المستخدم. وعند استخدام الفأرة سيبدأ «تفعيل» العنصر عندما يضغط المستخدم على الزر الرئيسي لها وينتهي عند إفلات الضغط على ذاك الزر.
‎:hoverالعناصر التي يتفاعل المستخدم معها مع جهاز تأشير لكن ليس بالضرورة أن يفعِّلها، ويُفعَّل هذا الصنف الزائف عادةً عندما يمر المستخدم بجهاز التأشير (الفأرة غالبًا) فوق العنصر.
:emptyأي عنصر ليس له أبناء، والأبناء يمكن أن تكون عقد عناصر (element nodes) أو عقدًا نصيةً (text nodes) بما في ذلك الفراغات. لن تؤثر التعليقات على اعتبار العنصر فارغًا أم لا.
‎:validأيّة عناصر <input> أو <form> التي نجح المتصفح بالتحقق من صحة محتوياتها.
‎:first-childأوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
‎:linkعنصرٌ لم تتم زيارته من قبل، ويُطابِق جميع عناصر <a> و <area> و <link> التي لها الخاصية href ولم تتم زيارتها بعد.
العناصر الزائفة “Pseudo-element”

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

‎::afterهو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
::beforeهو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا.
‎::backdropهو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.
‎::placeholderيُمثِّل النص البديل في أحد عناصر النماذج <form>.
‎::selectionيُمثِّل نصًّا في المستند الذي حدده المستخدم (باستخدام المؤشر مثلًا).
::first-letterيؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية).
‎::first-lineيؤدي إلى تطبيق الأنماط على أوّل سطر من العناصر الكتلية (block-level elements)، لاحظ أنَّ طول أوّل سطر يختلف تبعًا لعدة عوامل بما في ذلك عرض العنصر وعرض المستند وحجم الخط.
المجمعات “Combinators”

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

مجمعات مجموعة المحددات (Group of selectors) مجموعة من المحددات، يمكن استخدام هذا عندما تريد تطبيق نفس النمط على العديد من العناصر، لذلك بدلاً من إنشاء كتل مختلفة لكل عنصر يمكنك ببساطة سردها باستخدام , وكتابة النمط مرة واحدة.

h1, h2, h3, h4, h5, h6 {
  margin: 1rem;
  text-decoration: underline;
}

مجمعات العناصر السليلة (descendant selector) يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

.container .col {
  padding: .5rem 1rem;
}

مجمعات العناصر الأبناء (child combinator) رمزه ‎>‎ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

.container > ul {
  border: 1px solid black;
}

مجمعات العناصر الأخوة المتجاورة (adjacent sibling combinator) رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.

.item2 + li {
  font-size: 2rem;
}

مجمعات العناصر الأخوة العامة (general sibling combinator) رمزه ~ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى بعد العنصر الأول (وليس بالضرورة أن يأتي بعده مباشرةً)، وكان كلا العنصرين ابنًا لعنصر أب مشترك.

.item2 ~ li {
  color: red;
}

المراجع: