סלקטורים מגניבים ב CSS Level 4 שיגיעו אלינו בקרוב

הסטטוס הנוכחי של CSS Selectors Level 4 הוא סוג של טיוטה, עם זאת, דפדפנים מודרניים כבר החלו להטמיע חלקים מסויימים של הספסיפיקציות החדשות.

תכלס, לעולם לא יהיה CSS4 כפי שלעולם לא יהיה HTML6, אך מה שכן יהיה זה סלקטורים ו pseudo-classes ברמה גבוהה יותר (רמה 4). לא נכנס לפרטים מדוע, מה שחשוב הוא שאלו ירעננו וישפרו לנו מעט את חווית הכתיבה ב CSS ואף יקצרו תהליכים.

אז אגש ישר לעניין ואראה לכם מספר סלקטורים, או בעצם מספר pseudo-classes חדשים, כאלו שאני אישית מחבב ובטוח שגם אתם תמצאו כמאד שימושיים בעתיד.

הוספתי ליד כל pseudo-class את התמיכה שלו בדפדפנים השונים (במידה וקיימת כלל) המתעדכנת מהאתר caniuse.com שאני מניח וכולכם מכירים.

1. הסלקטור is:

pseudo-class חדש ב CSS Level 4 שיחסוך לכם זמן וקוד ויאפשר לקבץ סלקטורים יחד:

:is(article, div.section, section) h2 {
  font-size: 3em;
}

/* Is equivalent to that: */
article h2, div.section h2, section h2 {
  font-size: 3em;
}

הנה דוגמה נוספת שמבהירה את הנקודה וממחישה טוב יותר את החסכון בקוד:

:is(.main, p, div.my-stuff) :is(h1, h2, h3, h4) {
  border: 2px dotted #363b3e;
}

/* Is equivalent to that: */
.main h1,
.main h2,
.main h3,
.main h4,
p h1,
p h2,
p h3,
p h4,
div.my-stuff h1,
div.my-stuff h2,
div.my-stuff h3,
div.my-stuff h4 {
  border: 2px dotted #363b3e;
}

 הסלקטור הזה עבר תהפוכות ונקרא בעבר ״matches״ ולתקופה ״any״  אך מיועד להתחלף ל ״is״ עבור תאימות אחורנית.

2. הסלקטור placeholder-shown:

ה pseudo-class בשם :placeholder-shown יטרגט את כל האלמנטים מסוג input המראים placeholder טקסט. חשבו על זה כדרך נחמדה להבדיל בין אלמטים מסוג input שמראים כרגע placeholder טקסט לבין כאלו שאינם.

:placeholder-shown {
    border: 2px solid #39b54a;
}

בדוגמה הבאה צבע המסגרת יהיה ירוק רק אם ה placeholder מופיע, ברגע שהמשתמש יתחיל לכתוב המסגרת תעלם:

3. הסלקטור dir:

pseudo-class זה יטרגט כל אלמנט לפי הכיווניות הקבועה במסמך. למשל:

:dir(ltr) {
    color: red;
}

:dir(rtl) {
    color: blue;
}

אפשרות מסוג זו יכולה להיות מאד שימושית יחד עם השימוש ב CSS Variables באתרים דו לשוניים או אתרים מרובי שפות.

4. הסלקטור local-link:

ה pseudo-class הבא יטרגט קישורים המצביעים לאותו דומיין בו העמוד הנוכחי קיים אך עם טוויסט מגניב. תנו מבט בדוגמה הבאה:

a:local-link(0){
    color: red;
}

a:local-link(1){
    color: green;
}

a:local-link(2){
    color: blue;
}

נניח ואנו נמצאים בכתובת https://example.co.il/tag/css – במקרה של ה CSS שהצגנו מעלה:

The link https://example.co.il/ - will be colored red

The link https://example.co.il/tag - will be colored green

The link https://example.co.il/tag/css - will be colored blue

5. הסלקטור has:

תנו מבט בדוגמה הבאה. הסלקטור הבא יתאים לכל אלמנט <a> שמכיל ילד ישיר מסוג <img>:

a:has(> img)

אולי זה לא נראה לכם מעניין במיוחד, אז תנו מבט בסלקטור הבא היתאים לכל האלמנטים מסוג <section> שאינם מכילים Heading Tags (תגיות כותרת) כלשהן:

section:not(:has(h1, h2, h3, h4, h5, h6))

שימו לב כי הסדר של אותם pseudo-classes משנה וחשוב, שינוי המיקום של אלו בצורה הבאה:

section:has(:not(h1, h2, h3, h4, h5, h6))

… יגרום לכך שהסלקטור יתאים לכל אלמנט מסוג <section> המכיל אלמנטים כלשהם שאינם תגיות כותרת.

מאז שפוסט זה יצא לאור כתבתי פוסט רחב יותר על הסלקטור has ב CSS. תנו מבט 🙂

6. הסלקטור focus-within:

pseudo-class זה יטרגט כל אלמנט הנמצא במצב פוקוס וכל אלמנט אשר אחד הילדים שלו (in the flat tree) נמצא במצב פוקוס. כלומר, אם נסתכל על HTML הבא:

<form>
  <label for="given_name">השם שלך:</label>
  <input id="given_name" type="text">
</form>

ועל ה CSS הבא:

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

נקבל מצב בו ה form יקבל צבע רקע שונה ברגע שנבצע פוקוס על ה input. אם אתם בדפדפן תומך, הנה דוגמה חיה:

7. הסלקטור not:

ב CSS3 יכולנו להשתמש ב :not עבור סלקטור פשוט ויחיד. לעומת זאת בקרוב ניתן יהיה להוסיף מספר סלקטורים במקביל:

a:not([rel="external"], [rel="nofollow"]) {
    color: red;
}

עד כאן. מכירים עוד pseudo-classes מעניינים? שתפו אותנו בתגובות… נשמח לראות 🙂