4️⃣ Selectors (בוחרים ב-CSS)

Selector קובע על אילו אלמנטים ב-HTML מוחלים כללי ה-CSS. נלמד קיצורי דרך לסוגי בחירות של הורה/ילד, אחים, מאפיינים (attributes) ועוד.

1- סלקטורים בסיסיים

/* לפי תגית */
p { color: #555; }

/* לפי מחלקה */
.note { background: #fffae6; }

/* לפי מזהה (ייחודי בעמוד) */
#header { position: sticky; top: 0; }

/* קיבוץ סלקטורים */
h1, h2, .title { font-weight: 700; }

2- יחסי הורה/ילד

/* Descendant: כל צאצא בתוך ההורה (בכל עומק) */
div p { color: crimson; }

/* Child: ילד ישיר בלבד */
div > p { background: #ffe6e6; }

/* Descendant עם תגובה: קישורים בתוך רשימות */
ul a { text-decoration: underline; }

טיפ: אם אתה רוצה להשפיע רק על הצאצא הישיר – השתמש ב־>.

3- אחים (Adjacent/General Sibling)

/* Adjacent sibling: האלמנט הבא מיד אחרי */
h2 + p { margin-top: 0; }

/* General sibling: כל האחים שאחריו */
h2 ~ p { color: #666; }

4- סלקטורים לפי Attribute

/* אלמנטים עם המאפיין disabled */
[disabled] { opacity: 0.5; }

/* קישור שמתחיל ב-https */
a[href^="https"] { padding-right: 1ch; }

/* קישור שמסתיים ב-.pdf */
a[href$=".pdf"] { color: tomato; }

/* class שמכיל את המילה 'btn' */
[class*="btn"] { border-radius: 8px; }

5- :first/last/nth-child

/* הראשון/האחרון בין הילדים של ההורה */
ul li:first-child { font-weight: 700; }
ul li:last-child  { opacity: 0.7; }

/* כל אלמנט שני */
ul li:nth-child(2n) { background: #f6f6f6; }

/* כל אלמנט שלישי החל מהשני */
ul li:nth-child(3n+2) { color: #0ea5e9; }

6- :not ו-:is (קיצורים שימושיים)

/* בחר כל כפתור שאינו .primary */
button:not(.primary) { border: 1px solid #999; }

/* קיצור: אותו כלל על כמה אלמנטים */
:is(h1, h2, h3).title { letter-spacing: .02em; }

7- ספציפיות (Specificity) — מה גובר על מה?

• ID חזק יותר מ־class, שיותר חזק מ־tag. Inline style חזק מכולם.
• הימנע מעודף IDs; העדף מחלקות ושימוש נכון ב־BEM או Utility (כמו Tailwind).
• אם משהו “לא עובד”, בדוק: קונפליקט ספציפיות, סדר טעינה, או !important במקום אחר.

/* דוגמה לסדר גובר */
p { color: black; }          /* חלש */
.msg p { color: gray; }      /* חזק יותר */
#box .msg p { color: blue; } /* עוד יותר חזק */
p.inline { color: red !important; } /* יגבר בגלל !important */

✅ זכור: רשת יחסים (הורה/ילד/אחים), סלקטורים לפי Attribute, ו-פסאודו-מחלקות נותנים לך שליטה עדינה ומדויקת על ה-DOM. תעדף מחלקות, כתיבה קצרה עם :is/:not, והקפד על ספציפיות נמוכה לניהול קל.

🔗 מקורות רשמיים על CSS Selectors

• MDN – CSS Selectors (סקירה מלאה)
• W3C – Selectors Level 4 (מסמך התקן הרשמי)
• MDN – :is() · :not() · :nth-child() · :first-child · :last-child
• MDN – Attribute Selectors
• MDN – Specificity (ספציפיות) · W3C – כללי ספציפיות
• Google web.dev – Learn CSS: Selectors

💡 טיפים ל-SEO: השתמש בעוגני קישור תיאוריים (כמו “MDN – Specificity”), שמור על היררכיית כותרות תקינה (H1→H2→H3), הוסף rel="external" ו-noopener לקישורים יוצאים, ושקול גם קישורים פנימיים לעמודים אחרים באתר (למשל “Box Model”, “Pseudo-classes”).