תיעוד 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>` שיש לו גם את המחלקה

למחלקות ול-IDs יש דף משלהם, סלקטור מחלקה ב-CSS. פסאודו-קלאסים כמו :nth-child() ו-:not() מוסברים בדף על פסאודו-קלאסים.

מחברים: צאצא מול ילד

מחבר מקשר בין שני סלקטורים לפי היחס ביניהם בעץ ה-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>

איך דפדפנים קוראים סלקטורים

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

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