ספציפיות

הפודקאסט של 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;
}

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

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

בורר הכיתות

.my-class {
  color: red;
}

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

:hover {
  color: red;
}

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

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

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

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

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

בורר המזהים

בורר ID מקבל 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
• מחשבון ספציפי נוסף