ספציפיות

הפודקאסט של שירות CSS – 003: סגוליות

נניח שאתם עובדים עם קוד ה-HTML וה-CSS הבאים:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

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

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

ציון ספציפיות

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

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

ניקוד כל סוג בורר

כל סוג סלקטור מזכה בנקודות. צריך להוסיף את כל הנקודות האלה כדי לחשב את רמת הספציפיות הכוללת של בורר.

בורר אוניברסלי

בורר אוניברסלי (*) אינו ספציפי והוא מקבל 0 נקודות. המשמעות היא שכל כלל שכולל נקודה אחת או יותר יבטל אותה

* {
  color: red;
}

בורר רכיב או רכיב מדומה

רכיב (סוג) או פסאודו-רכיב הסלקטור מקבל נקודה ספציפית אחת .

בורר סוגי הפריטים

div {
  color: red;
}

בורר פסאודו-רכיב

::selection {
  color: red;
}

בורר של מחלקה, פסאודו-מחלקה או מאפיינים

כיתה, פסאודו-מחלקה או בורר המאפיינים מקבל 10 נקודות ספציפיות.

בורר הכיתות

.my-class {
  color: red;
}

בורר פסאודו-מחלקה

:hover {
  color: red;
}

בורר מאפיינים

[href='#'] {
  color: red;
}

:not() פסאודו-מחלקה עצמה לא מוסיפה שום דבר לחישוב הספציפיות. עם זאת, הסלקטורים שמועברים כארגומנטים מתווספים לחישוב הספציפיות.

div:not(.my-class) {
  color: red;
}

בדוגמה הזו יהיו 11 נקודות ספציפיות כי יש בו בורר סוגים אחד (div) וכיתה אחת בתוך :not().

בורר מזהים

מזהה הסלקטור מקבל 100 נקודות ספציפיות, כל עוד אתם משתמשים בבורר מזהים (#myID) ולא בבורר מאפיינים ([id="myID"]).

#myID {
  color: red;
}

מאפיין סגנון מוטבע

שירות CSS שהוחל ישירות על המאפיין style של רכיב ה-HTML, מקבל ציון ספציפיות של 1,000 נקודות. כלומר, כדי לשנות את ברירת המחדל ב-CSS, צריך לכתוב בורר ספציפי מאוד.

<div style="color: red"></div>

כלל אחד (!important)

כמו כן, !important בסוף ערך CSS מקבל ציון ספציפיות של 10,000 נקודות. מדובר ברמת הספציפיות הגבוהה ביותר שפריט יחיד יכול לקבל.

כלל !important חל על נכס CSS, כך שכל מה שנכלל בכלל הכולל (בורר ומאפיינים) לא מקבל את אותו ציון ספציפיות.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

בדיקת ההבנה

בחינת הידע שלכם לגבי דירוג ספציפי

ספציפיות בהקשר

הספציפיות של כל בורר שתואם לרכיב מסוים מתווספת. נבחן את קוד ה-HTML לדוגמה:

<a class="my-class another-class" href="#">A link</a>

בקישור הזה יש שתי כיתות. מוסיפים את שירות ה-CSS הבא, ומקבלים נקודת ספציפיות אחת:

a {
  color: red;
}

להפנות לאחד מהמחלקות בכלל הזה, יש לו עכשיו 11 נקודות ספציפיות:

a.my-class {
  color: green;
}

מוסיפים את הכיתה השנייה לסלקטור, יש לו עכשיו 21 נקודות ספציפיות:

a.my-class.another-class {
  color: rebeccapurple;
}

מוסיפים את המאפיין href לבורר, עכשיו יש לו 31 נקודות ספציפיות:

a.my-class.another-class[href] {
  color: goldenrod;
}

לסיום,מוסיפים פסאודו-מחלקה :hover לכל זה, בסופו של דבר, הבורר מקבל 41 נקודות ספציפיות:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

בדיקת ההבנה

בחינת הידע שלכם לגבי דירוג ספציפי

המחשה חזותית ספציפית

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

הקבוצה הימנית היא id סלקטורים. הקבוצה השנייה היא בוררי מחלקה, מאפיינים ומחלקה מדומה. הקבוצה הסופית היא בוררי אלמנטים ופסאודו-רכיבים.

לידיעתך, הבורר הבא הוא 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

בדיקת ההבנה

בוחנים את הידע שלכם לגבי המחשה חזותית ספציפיות

שיפור פרגמטי של ספציפיוּת

נניח שיש לנו שירות CSS שנראה כך:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

באמצעות קוד HTML שנראה כך:

<button class="my-button" onclick="alert('hello')">Click me</button>

ללחצן יש רקע אפור, כי הבורר השני מקבל 11 נקודות ספציפיות (0-1-1). הסיבה לכך היא שיש בו בורר סוגים אחד (button), שהיא נקודה אחת ובורר מאפיינים ([onclick]), שהוא 10 נקודות.

הכלל הקודם .my-button — מקבל 10 נקודות (0-1-0), כי יש בו בורר כיתה אחד.

אם אתם רוצים לשפר את הכלל, חוזרים על בורר הכיתות כך:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

עכשיו, ללחצן יהיה רקע כחול, כי הבורר החדש מקבל ציון ספציפיות של 20 נקודות (0-2-0).

לפי ציוני ספציפיות תואמים, המכונה החדשה ביותר מנצחת

בינתיים נישאר עם דוגמה הלחצן ונשנה את ה-CSS כך:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

ללחצן יש רקע אפור, כי לשני הסלקטורים יש ציון ספציפיוּת זהה (0-1-0).

אם משנים את הכללים לפי סדר המקור, הלחצן יהיה כחול.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

משאבים

• מפרט CSS
• מחשבון ספציפיות
• ספציפיות ל-MDN
• פרטים ספציפיים על ספציפיות לשירותי CSS
• מחשבון סגוליות נוסף