وثائق CSS قابلة للتشغيل: المحددات في CSS

Q: ما هو المحدد في CSS؟

الجزء من قاعدة CSS الذي يسبق { ويحدد العناصر التي تنطبق عليها التصريحات. في p.note { color: blue; } يطابق المحدد p.note كل يحمل الفئة note.

Q: ما الفرق بين المسافة و> في محدد CSS؟

المسافة هي مُركِّب السليل: nav a يطابق كل رابط في أي مكان داخل nav وعلى أي عمق. أما > فهو مُركِّب الابن: nav > a يطابق فقط الروابط التي أبوها المباشر هو nav.

Q: ماذا تعني + في CSS؟

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

Q: كيف أختار العناصر حسب السمة في CSS؟

ضع السمة بين قوسين مربعين: [disabled] يطابق العناصر التي تملكها، و[type="email"] يطابق قيمة مطابقة تمامًا، و[href^="https"] قيمة تبدأ بنص معيّن، و[href$=".pdf"] قيمة تنتهي به، و[class*="btn"] قيمة تحتويه.

Q: هل يمكن لـ CSS اختيار العنصر الأب؟

نعم، عبر الفئة الزائفة :has() المدعومة في الإصدارات الحالية من Chrome وFirefox وSafari. li:has(> a.active) يطابق عناصر القائمة التي تحتوي مباشرة على رابط نشط.

ما هو محدد CSS

المحدد هو الجزء من القاعدة الذي يسبق الأقواس المعقوصة. يقرر العناصر التي تنطبق عليها التصريحات.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

المحددات الأساسية الخمسة تغطي معظم ملفات الأنماط الحقيقية:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

أنواع المحددات بنظرة سريعة

المحدد	مثال	ما يطابقه
العام	`*`	كل عنصر
النوع	`p`	كل `<p>`
الفئة	`.tip`	العناصر التي تحمل `class="tip"` (ضمن فئات أخرى)
المعرّف ID	`#main-title`	العنصر الذي يحمل `id="main-title"`
السمة	`[type="email"]`	العناصر التي تطابق سمتها
الفئة الزائفة	`a:hover`، `li:first-child`	العناصر في حالة أو موضع معيّن
العنصر الزائف	`p::first-line`، `.x::before`	جزء من عنصر
المجموعة	`h1, h2, h3`	أي عنصر يطابق أحد عناصر القائمة
المركّب	`p.tip`	عنصر `<p>` يحمل الفئة أيضًا

للفئات والمعرّفات صفحتها الخاصة، محدد الفئة في CSS. والفئات الزائفة مثل :nth-child() و:not() مشروحة في صفحة الفئات الزائفة.

المُركِّبات: السليل مقابل الابن

المُركِّب (combinator) يربط محددين حسب علاقتهما في شجرة HTML. هناك أربعة منها.

المُركِّب	الصيغة	يطابق `B` حين
السليل	`A B` (مسافة)	يكون B في أي مكان داخل A
الابن	`A > B`	يكون أبو B هو A
الأخ المجاور	`A + B`	يأتي B مباشرة بعد A، تحت الأب نفسه
الأخ العام	`A ~ B`	يأتي B في مكان ما بعد A، تحت الأب نفسه

المسافة و> هما الزوج الذي يخلط الناس بينهما. محدد السليل يصل إلى أي عمق، أما محدد الابن فيتوقف عند مستوى واحد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

مُركِّبا الإخوة: + و~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

الإخوة ينظرون إلى الأمام فقط. لا يوجد مُركِّب «الأخ السابق»، لكن :has() تستطيع التعبير عنه: h2:has(+ p) يطابق h2 يليه مباشرة p.

محددات السمات

الأقواس المربعة تطابق حسب السمات وقيمها:

المحدد	ما يطابقه
`[disabled]`	يملك السمة، بأي قيمة
`[type="email"]`	القيمة هي `email` تمامًا
`[href^="https"]`	القيمة تبدأ بـ `https`
`[href$=".pdf"]`	القيمة تنتهي بـ `.pdf`
`[class*="icon"]`	القيمة تحتوي على `icon` في أي موضع
`[lang\|="en"]`	القيمة هي `en` أو تبدأ بـ `en-`
`[data-state="open" i]`	مطابقة تامة مع تجاهل حالة الأحرف

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

محددات السمات على سمات data-* طريقة نظيفة لتنسيق الحالة التي يضبطها JavaScript، من دون اختراع أسماء فئات.

جرّب أي محدد

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

جرّب #demo a وul > li وh2 ~ * وa[href^="https"] وli:not(.active).

المركّب مقابل السليل: المسافة مهمة

p.note وp .note تختلفان بمسافة واحدة وتعنيان شيئين مختلفين.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

كيف تقرأ المتصفحات المحددات

حين تطابق عدة قواعد العنصر نفسه وتضبط الخاصية نفسها، يفوز المحدد الأكثر خصوصية، وعند التعادل يفوز اللاحق. المعرّف يرجح على أي عدد من الفئات، والفئة ترجح على أي عدد من محددات النوع؛ وفي صفحة !important جدول الخصوصية الكامل.

للمجموعة مشكلة واحدة: إذا كان أي محدد في قائمة عادية غير صالح، تُسقط القاعدة كلها. في a, b:unknown { } لا تُنسق حتى الروابط. إحاطة القائمة بـ :is() تجعلها متسامحة، فيبقى :is(a, b:unknown) ينسق الروابط.

أخطاء شائعة

نسيان النقطة أو علامة #. يستهدف tip { } عنصر <tip>، لا class="tip". اكتب .tip.
مسافة داخل محدد مركّب. p .note ليس p.note.
توقع أن يصل > إلى الأحفاد. استخدم المسافة لأي عمق.
خطأ مطبعي واحد يفسد مجموعة كاملة. في h1, h2:hovr, h3 لا يُنسق شيء.
محددات طويلة جدًا. body div.wrapper ul li a صعب القراءة وصعب التجاوز. فئة واحدة تكفي عادةً.

الأسئلة الشائعة

ما هو المحدد في CSS؟

الجزء من قاعدة CSS الذي يسبق { ويحدد العناصر التي تنطبق عليها التصريحات. في p.note { color: blue; } يطابق المحدد p.note كل <p> يحمل الفئة note.

ما الفرق بين المسافة و> في محدد CSS؟

المسافة هي مُركِّب السليل: nav a يطابق كل رابط في أي مكان داخل nav وعلى أي عمق. أما > فهو مُركِّب الابن: nav > a يطابق فقط الروابط التي أبوها المباشر هو nav.

ماذا تعني + في CSS؟

+ هو مُركِّب الأخ المجاور. h2 + p يطابق عنصر <p> يأتي مباشرة بعد <h2> تحت الأب نفسه. أما ~ فأوسع: h2 ~ p يطابق كل أخ <p> لاحق.

كيف أختار العناصر حسب السمة في CSS؟

ضع السمة بين قوسين مربعين: [disabled] يطابق العناصر التي تملكها، و[type="email"] يطابق قيمة مطابقة تمامًا، و[href^="https"] قيمة تبدأ بنص معيّن، و[href$=".pdf"] قيمة تنتهي به، و[class*="btn"] قيمة تحتويه.

هل يمكن لـ CSS اختيار العنصر الأب؟

نعم، عبر الفئة الزائفة :has() المدعومة في الإصدارات الحالية من Chrome وFirefox وSafari. li:has(> a.active) يطابق عناصر القائمة التي تحتوي مباشرة على رابط نشط.

مفاهيم ذات صلة