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

Q: كيف أختار فئة class في CSS؟

اكتب نقطة يليها اسم الفئة: .card { ... } ينسق كل عنصر يحمل class="card". النقطة موجودة في CSS فقط؛ سمة HTML لا تحتوي على نقطة.

Q: كيف أعطي عنصرًا فئتين؟

افصل بين الاسمين بمسافة داخل سمة واحدة: class="btn primary". كتابة class مرتين على العنصر لا تعمل؛ يحتفظ المتصفح بالسمة الأولى فقط.

Q: كيف أختار عنصرًا يحمل فئتين؟

اربط محددي الفئتين من دون مسافة: .btn.primary يطابق العناصر التي تحمل الفئتين معًا. ومع المسافة، .btn .primary تعني عنصر .primary داخل عنصر .btn.

محدد الفئة class ومحدد المعرّف id في CSS

محدد الفئة (.name) ينسق كل عنصر يحمل تلك الفئة، ومحدد المعرّف (#name) ينسق العنصر الوحيد الذي يحمل ذلك الـ id. تعلّم الصيغة، والفئات المتعددة والمتسلسلة، والفرق بين class وid، وقواعد التسمية، وتبديل الفئات بـ JavaScript.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

محدد الفئة

محدد الفئة نقطة يليها اسم الفئة. ينسق كل عنصر تحتوي سمته class على ذلك الاسم، مهما كان نوع العنصر.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

النقطة تظهر في CSS فقط. في HTML تكون السمة class="badge" من دون نقطة. أسماء الفئات حساسة لحالة الأحرف: .Badge لا يطابق class="badge".

عدة فئات على عنصر واحد

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger، من دون مسافة، يطابق العناصر التي تحمل الفئتين معًا. عنصر span الأخير يحمل danger لكن لا يحمل btn، لذلك تتخطاه القاعدة المتسلسلة.

أشكال محدد الفئة

المحدد	ما يطابقه
`.note`	أي عنصر يحمل الفئة `note`
`p.note`	عناصر `<p>` فقط التي تحمل الفئة `note`
`.btn.primary`	العناصر التي تحمل `btn` و`primary` معًا
`.card .title`	عنصر `.title` في أي مكان داخل `.card`
`.card > .title`	عنصر `.title` أبوه `.card`
`.a, .b`	العناصر التي تحمل `a` أو `b`

الفرق بين وجود المسافة وغيابها مشروح مع مُركِّبات أخرى في صفحة المحددات في CSS.

محدد المعرّف

محدد المعرّف علامة # يليها الـ id: #site-header ينسق العنصر الذي يحمل id="site-header". يجب أن يكون الـ id فريدًا في الصفحة، لذلك يستهدف محدد المعرّف عنصرًا واحدًا بالضبط.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

المعرّفات تفعل أكثر من التنسيق: href="#details" ينقل الصفحة إلى العنصر، و<label for="email"> يشير إلى id حقل الإدخال، وJavaScript يجده عبر document.getElementById('details'). هذا هو السبب المعتاد لإعطاء عنصر id؛ أما للتنسيق فالفئة هي الأداة الأفضل.

الفرق بين class وid

	الفئة `.name`	المعرّف `#name`
في الصفحة	عناصر كثيرة	عنصر واحد
لكل عنصر	عدة فئات مفصولة بمسافات	واحد
الخصوصية	(0,1,0)	(1,0,0)
هدف رابط (`#name` في العنوان)	لا	نعم
الأنسب لـ	التنسيق	المراسي، والتسميات، ونقاط ربط JavaScript

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

إضافة الفئات وإزالتها بـ JavaScript

الفئات هي الطريقة المعتادة كي يغيّر JavaScript مظهر شيء ما: CSS تعرّف الحالات، والسكربت يبدّل بينها فقط.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

يوفر classList أيضًا add وremove وcontains وreplace. تجنب إسناد قيمة إلى className مباشرة: فهي تستبدل كل الفئات التي كان يحملها العنصر.

تسمية الفئات

الحروف والأرقام والشرطات والشرطات السفلية آمنة: card، card-title، card__title، is-open.
لا تبدأ المحدد برقم أو بشرطة يليها رقم. .2col غير صالح في CSS. ابدأ بحرف (.cols-2) أو هرّب الرقم (.\32 col).
سمِّ حسب الغرض لا حسب الشكل: .error تصمد أمام إعادة التصميم، و.red-text لا تصمد.
اتفاقية تسمية تساعد في المشاريع الأكبر. تكتب BEM الشكل block__element--modifier، مثلًا .card__title--large.

أخطاء شائعة

وضع النقطة في HTML. class=".badge" لا يطابق .badge أبدًا.
سمتا class. <p class="a" class="b"> يحتفظ بـ a فقط. استخدم class="a b".
مسافة حين تقصد الفئتين معًا. .btn .primary يبحث عن عنصر متداخل؛ أما .btn.primary فهو العنصر نفسه.
تكرار id. المعرّفات المكررة تُفسد getElementById وروابط المراسي وربط التسميات، حتى لو بدت CSS تعمل.
تنسيق كل شيء بالمعرّفات. خصوصيتها تجعل التجاوزات اللاحقة مرهقة؛ استخدم الفئات.

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

كيف أختار فئة class في CSS؟

اكتب نقطة يليها اسم الفئة: .card { ... } ينسق كل عنصر يحمل class="card". النقطة موجودة في CSS فقط؛ سمة HTML لا تحتوي على نقطة.

ما الفرق بين class وid في CSS؟

يمكن استخدام الفئة على أي عدد من العناصر، ويمكن للعنصر أن يحمل عدة فئات؛ أما الـ id فيجب أن يكون فريدًا في الصفحة، وللعنصر id واحد على الأكثر. في CSS خصوصية #id أعلى بكثير من .class، لذلك يصعب تجاوز قواعد المعرّف.

كيف أعطي عنصرًا فئتين؟

افصل بين الاسمين بمسافة داخل سمة واحدة: class="btn primary". كتابة class مرتين على العنصر لا تعمل؛ يحتفظ المتصفح بالسمة الأولى فقط.

كيف أختار عنصرًا يحمل فئتين؟

اربط محددي الفئتين من دون مسافة: .btn.primary يطابق العناصر التي تحمل الفئتين معًا. ومع المسافة، .btn .primary تعني عنصر .primary داخل عنصر .btn.

هل يمكن أن يبدأ اسم الفئة في CSS برقم؟

في HTML نعم، لكن المحدد لا يمكن أن يبدأ برقم غير مُهرَّب، فـ .1col غير صالح في CSS. هرّب الرقم (.\31 col) أو، وهو الأفضل، ابدأ أسماء الفئات بحرف.

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