תיעוד CSS עם דוגמאות להרצה: סלקטור מחלקה

Q: איך בוחרים מחלקה ב-CSS?

כותבים נקודה ואחריה את שם המחלקה: .card { ... } מעצב כל אלמנט עם class="card". הנקודה נמצאת רק ב-CSS; בתכונה ב-HTML אין נקודה.

Q: איך נותנים לאלמנט שתי מחלקות?

מפרידים את השמות ברווח בתוך תכונה אחת: class="btn primary". כתיבה של class פעמיים על אלמנט לא עובדת; הדפדפן שומר רק את התכונה הראשונה.

Q: איך בוחרים אלמנט שיש לו שתי מחלקות?

משרשרים את סלקטורי המחלקה בלי רווח: .btn.primary מתאים לאלמנטים שיש להם את שתי המחלקות. עם רווח, .btn .primary פירושו אלמנט .primary בתוך אלמנט .btn.

CSS Class Selector ו-ID Selector (.class ו-#id)

סלקטור המחלקה (.name) מעצב כל אלמנט עם המחלקה הזאת; סלקטור ה-ID (#name) מעצב את האלמנט היחיד עם ה-id הזה. למדו את התחביר, כמה מחלקות ושרשור מחלקות, class מול id, כללי שמות, והחלפת מחלקות עם JavaScript.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-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

סלקטור ID הוא סולמית ואחריה ה-id: #site-header מעצב את האלמנט עם id="site-header". id חייב להיות ייחודי בעמוד, ולכן סלקטור 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>

ל-id יש תפקידים מעבר לעיצוב: href="#details" גולל אל האלמנט, <label for="email"> מצביע על ה-id של שדה קלט, ו-JavaScript מוצא אותו עם document.getElementById('details'). זו הסיבה הרגילה לתת לאלמנט id; לעיצוב, class הוא הכלי הטוב יותר.

Class מול ID

	Class `.name`	ID `#name`
בכל עמוד	הרבה אלמנטים	אלמנט אחד
בכל אלמנט	כמה, מופרדים ברווח	אחד
ספציפיות	(0,1,0)	(1,0,0)
יעד לקישור (`#name` בכתובת)	לא	כן
הכי מתאים ל	עיצוב	עוגנים, תוויות, נקודות חיבור ל-JavaScript

פער הספציפיות הוא הסיבה המעשית לעצב עם מחלקות. ID אחד מנצח כל מספר של מחלקות, ולכן כלל שנכתב עם ID אפשר לדרוס רק עם ID אחר, סגנון inline או !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) או עשו escape לספרה (.\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. id כפולים שוברים את getElementById, קישורי עוגן וקישור של תוויות, גם אם ה-CSS נראה עובד.
עיצוב של הכול עם id. הספציפיות שלהם הופכת דריסות מאוחרות יותר לכואבות; השתמשו במחלקות.

שאלות נפוצות

איך בוחרים מחלקה ב-CSS?

כותבים נקודה ואחריה את שם המחלקה: .card { ... } מעצב כל אלמנט עם class="card". הנקודה נמצאת רק ב-CSS; בתכונה ב-HTML אין נקודה.

מה ההבדל בין class ל-id ב-CSS?

class אפשר להשתמש בו על כל מספר של אלמנטים, ולאלמנט יכולות להיות כמה מחלקות; id חייב להיות ייחודי בעמוד, ולאלמנט יש לכל היותר אחד. ב-CSS, ל-#id יש ספציפיות גבוהה בהרבה מ-.class, ולכן קשה יותר לדרוס כללי ID.

איך נותנים לאלמנט שתי מחלקות?

מפרידים את השמות ברווח בתוך תכונה אחת: class="btn primary". כתיבה של class פעמיים על אלמנט לא עובדת; הדפדפן שומר רק את התכונה הראשונה.

איך בוחרים אלמנט שיש לו שתי מחלקות?

משרשרים את סלקטורי המחלקה בלי רווח: .btn.primary מתאים לאלמנטים שיש להם את שתי המחלקות. עם רווח, .btn .primary פירושו אלמנט .primary בתוך אלמנט .btn.

האם שם מחלקה ב-CSS יכול להתחיל במספר?

ב-HTML כן, אבל סלקטור לא יכול להתחיל בספרה בלי escape, ולכן .1col הוא CSS לא תקין. עשו escape לספרה (.\31 col) או, עדיף, התחילו שמות מחלקות באות.

מושגים קשורים