תיעוד 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) פונה לחלק של אלמנט או יוצר תוכן מחולל.

מה זה פסאודו-קלאס

פסאודו-קלאס הוא מילת מפתח אחרי נקודתיים שבוחרת אלמנטים לפי המיקום שלהם במסמך או לפי המצב שלהם. מצמידים אותו לסלקטור רגיל: 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) יש דף משלהם, CSS hover.

: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`	שדה קלט שמציג כרגע את ה-placeholder שלו
`: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) פונה לחלק של אלמנט או יוצר תוכן מחולל.

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