وثائق CSS قابلة للتشغيل: الفئات الزائفة

Q: كيف يعمل nth-child في CSS؟

يطابق :nth-child(an+b) العناصر التي يساوي موضعها بين إخوتها a×n+b حيث n = 0 و1 و2 وهكذا، والعد يبدأ من 1. :nth-child(3) هو الابن الثالث، و:nth-child(odd) أو 2n+1 كل ابن فردي، و:nth-child(n+4) الرابع وما بعده.

Q: ما الفرق بين nth-child وnth-of-type؟

يعدّ :nth-child() كل العناصر الإخوة ثم يتحقق من باقي المحدد؛ أما :nth-of-type() فيعدّ الإخوة من نوع العنصر نفسه فقط. في قائمة فيها h2 تتبعه فقرات، لا يطابق p:nth-child(1) شيئًا بينما يطابق p:nth-of-type(1) الفقرة الأولى.

Q: كيف أستخدم :not() في CSS؟

ضع المحدد الذي تريد استبعاده بين القوسين: li:not(.done) يطابق كل عنصر قائمة لا يحمل الفئة done. ويقبل قائمة أيضًا، input:not([type="checkbox"], [type="radio"]).

Q: ما الفرق بين الفئة الزائفة والعنصر الزائف؟

الفئة الزائفة (نقطتان رأسيتان مرة واحدة، :hover) تختار عنصرًا موجودًا كاملًا في حالة ما. أما العنصر الزائف (مرتان، ::before) فيستهدف جزءًا من عنصر أو ينشئ محتوى مولَّدًا.

ما هي الفئة الزائفة

الفئة الزائفة (pseudo-class) كلمة مفتاحية بعد نقطتين رأسيتين تختار العناصر حسب موضعها في المستند أو حالتها. تلحقها بمحدد عادي: li:first-child، input:focus، a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

لفئات الحالة الخاصة بالروابط والفأرة (:hover و:active و:visited) صفحتها الخاصة، hover في CSS.

:nth-child() ومعادلة an+b

يقبل :nth-child() رقمًا أو كلمة مفتاحية أو معادلة an+b. يجرّب المتصفح n = 0، 1، 2، ... ويطابق كل موضع تنتجه المعادلة (المواضع تبدأ من 1).

المعادلة	المواضع المطابقة	المعنى
`3`	3	الابن الثالث
`odd` أو `2n+1`	1، 3، 5، ...	الصفوف الفردية
`even` أو `2n`	2، 4، 6، ...	الصفوف الزوجية
`3n`	3، 6، 9، ...	كل ثالث
`n+4`	4، 5، 6، ...	الرابع وما بعده
`-n+3`	1، 2، 3	الثلاثة الأولى
`3n+1`	1، 4، 7، ...	كل ثالث بدءًا من الأول

اكتب معادلة وراقب العناصر التي تطابقها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

جرّب odd وeven و4 وn+7 و-n+5 و2n+3. المعادلة غير الصالحة لا تطابق شيئًا.

توأمها الذي يعدّ من النهاية هو :nth-last-child(): li:nth-last-child(-n+2) يختار العنصرين الأخيرين.

الفرق بين nth-child وnth-of-type

يعدّ :nth-child() كل العناصر الإخوة مهما كان وسمها، وبعد ذلك فقط يتحقق من باقي المحدد. أما :nth-of-type() فيعدّ الإخوة من الوسم نفسه فقط. يظهر الفرق بمجرد أن يختلط الإخوة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

توجد الأزواج نفسها للأطراف: :first-child و:first-of-type، و:last-child و:last-of-type، و:only-child و:only-of-type.

:not() و:is() و:where()

الفئة الزائفة	مثال	ما تطابقه
`:not(X)`	`li:not(.done)`	العناصر التي لا تطابق X
`:is(X, Y)`	`:is(h1, h2, h3) a`	العناصر التي تطابق أيًا من القائمة
`:where(X, Y)`	`:where(ul, ol) li`	مثل `:is()` لكن بخصوصية صفر
`:has(X)`	`li:has(> input:checked)`	العناصر التي تحتوي على ما يطابق X

:not() هي المستخدمة كل يوم، مثلًا لوضع فاصل بين العناصر لكن ليس بعد الأخير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

فئات الحالة: focus وchecked وdisabled وinvalid

الفئة الزائفة	ما تطابقه
`:focus`	العنصر الذي عليه تركيز لوحة المفاتيح أو الفأرة
`:focus-visible`	عنصر مُركَّز يقرر المتصفح إظهار حلقة التركيز له (عادةً تركيز لوحة المفاتيح)
`:focus-within`	عنصر يحتوي على العنصر المُركَّز
`:checked`	مربع اختيار أو زر راديو محدد، أو `<option>` مختار
`:disabled` / `:enabled`	عناصر النموذج المعطلة (أو غير المعطلة)
`:required` / `:optional`	حقول الإدخال مع `required` أو من دونها
`:invalid` / `:valid`	حقول الإدخال التي تفشل قيمتها في التحقق أو تنجح
`:user-invalid`	غير صالح، لكن فقط بعد أن يتفاعل المستخدم معه
`:placeholder-shown`	حقل إدخال يعرض نصه التوضيحي حاليًا
`:empty`	عنصر بلا أبناء، ولا حتى نص
`:target`	العنصر الذي يطابق الـ id الخاص به `#fragment` في العنوان

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

انقر داخل حقل البريد الإلكتروني: تتحول تسميته إلى الأزرق عبر :focus-within. اكتب شيئًا ليس بريدًا إلكترونيًا واترك الحقل: تحوّل :user-invalid الحد إلى الكهرماني. أما :invalid العادية فكانت ستلوّن الحقل المطلوب الفارغ بالكهرماني قبل أن تلمسه.

مهما فعلت بـ :focus، أبقِ نمط تركيز مرئيًا. إزالة الإطار الخارجي من دون بديل تترك مستخدمي لوحة المفاتيح عاجزين عن رؤية مكانهم.

:has()، محدد الأب

تطابق :has() العنصر حسب ما يحتويه. إنها «محدد الأب» الذي طال انتظاره، وتعمل في الإصدارات الحالية من Chrome وFirefox وSafari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

اختر الخطة الأخرى: تتبع البطاقة كلها زر الراديو، من دون أي JavaScript.

أخطاء شائعة

مسافة قبل النقطتين. li :first-child تعني «ابن أول داخل li». اكتب li:first-child.
توقع أن p:nth-child(1) تعني «أول p». معناها «الابن الأول، إن كان p». استخدم :first-of-type لأول p.
العد من 0. المواضع تبدأ من 1: :nth-child(0) لا يطابق شيئًا.
إزالة إطارات التركيز. :focus { outline: none } من دون بديل تُفسد التنقل بلوحة المفاتيح.
الخلط بين : و::. :before تهجئة قديمة للعنصر الزائف ::before؛ الفئات الزائفة تستخدم دائمًا نقطتين رأسيتين مرة واحدة.

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

ما هي الفئة الزائفة في CSS؟

كلمة مفتاحية بعد نقطتين رأسيتين تختار العناصر حسب الحالة أو الموضع لا حسب الاسم، مثل a:hover وli:first-child وinput:focus. تُضاف إلى محدد عادي، ومعظم الفئات الزائفة تُحسب كفئة في الخصوصية (:where() تُحسب صفرًا).

كيف يعمل nth-child في CSS؟

يطابق :nth-child(an+b) العناصر التي يساوي موضعها بين إخوتها a×n+b حيث n = 0 و1 و2 وهكذا، والعد يبدأ من 1. :nth-child(3) هو الابن الثالث، و:nth-child(odd) أو 2n+1 كل ابن فردي، و:nth-child(n+4) الرابع وما بعده.

ما الفرق بين nth-child وnth-of-type؟

يعدّ :nth-child() كل العناصر الإخوة ثم يتحقق من باقي المحدد؛ أما :nth-of-type() فيعدّ الإخوة من نوع العنصر نفسه فقط. في قائمة فيها h2 تتبعه فقرات، لا يطابق p:nth-child(1) شيئًا بينما يطابق p:nth-of-type(1) الفقرة الأولى.

كيف أستخدم :not() في CSS؟

ضع المحدد الذي تريد استبعاده بين القوسين: li:not(.done) يطابق كل عنصر قائمة لا يحمل الفئة done. ويقبل قائمة أيضًا، input:not([type="checkbox"], [type="radio"]).

ما الفرق بين الفئة الزائفة والعنصر الزائف؟

الفئة الزائفة (نقطتان رأسيتان مرة واحدة، :hover) تختار عنصرًا موجودًا كاملًا في حالة ما. أما العنصر الزائف (مرتان، ::before) فيستهدف جزءًا من عنصر أو ينشئ محتوى مولَّدًا.

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