ספציפיות CSS ומתי להשתמש בתג החשוב CSS

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

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

האופי המדורג של CSS

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

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

אנו מחילים שני כיתות על אלמנט וניתן לכל כיתה שונה background-color.

 This is a test paragraph

הנה CSS:

.style2 { background-color: red; } .style1 { background-color: yellow; }

זו התוצאה:

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

קח את הדוגמה הבאה.

 This is a test paragraph

ה- CSS נראה כך:

#paragraph { background-color: red; } .style1 { background-color: yellow; }

איזה סגנון אתה מצפה להחיל על האלמנט? את #paragraphאו את .style1?

הנה התוצאה:

שימו לב שהראשון מוחל. #paragraphהוא בורר id, בעוד style1הוא בורר מעמד. הסיבה לכך היא כי מפל עובד בספציפיות כדי לקבוע אילו ערכים מוחלים על אלמנט.

אז מה הספציפיות של CSS?

הסבר על הספציפיות של CSS

על פי MDN, הספציפיות היא האמצעי לפיו הדפדפנים מחליטים אילו ערכי מאפייני CSS הם הרלוונטיים ביותר לאלמנט ולכן הם יוחלו.

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

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

אז איך מחשבים את הספציפיות של הסלקטורים?

היררכיית הספציפיות

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

נקצה משקולות לכל בורר כדי שנבין טוב יותר כיצד כל בורר מדורג. נתחיל בפחות.

אלמנטים ואלמנטים פסאודו

אנו משתמשים בוררי אלמנטים כמו a, p, ו divלסגנון אלמנט נבחר, תוך פסאודו-אלמנטים כמו ::afterו ::beforeמשמשים לחלקים ספציפיים סגנון של רכיב.

 p { color: red; }  p::before { color: red; }

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

שיעורים, תכונות ושיעורי פסאודו

להלן דוגמאות לשיעורים, תכונות ושיעורי פסאודו:

 .person { color: red; }  [type="radio"] { color: red; }  :focus { color: red; }

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

בוחרי תעודת זהות

בוחרים מזהים משמשים למיקוד אלמנט באמצעות מזהה האלמנט.

 #header { color: red; }

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

סגנונות מוטבעים

סגנונות מוטבעים מוחלים ישירות על האלמנט במסמך ה- HTML. זו דוגמא:

This is a paragraph

סגנונות מוטבעים הם בעלי הספציפיות הגבוהה ביותר. במערכת המשקל הספציפיות שלנו, יש להם ערך של 1000.

הנה סיכום המשקולות:

Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 

בואו ננסה להבין את זה.

ערכי המאפיינים של בוחרים עם משקל גבוה יותר יוחלו תמיד על בורר עם משקל נמוך יותר.

לסגנונות מוטבעים יש את המשקל הגבוה ביותר וערך המאפיין שלהם עוקף את כל ערך הסלקטור השני שמופעל על אלמנט.

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

This is a paragraph

גיליון הסגנונות:

#paragraph { color: green; } .yellow { color: yellow; }

זו התוצאה:

אותו דבר קורה כאשר לבורר מזהה ולבורר מחלקות יש ערכים עבור אותו נכס. ערך הנכס של בורר הזיהוי יחול.

שים לב שהמשקולות חלות רק כאשר לבוחרים שונים יש ערכים עבור אותו הדברproperty .

בורר אלמנטים מרובים

There are times when more than one selector is used to target an element. For example, for a list like this:

    

     
First item
     
Second item
     
Third item
    

You may target the list items like this:

.list > li { color: green; }

or like this:

ul > li { color: red; }

In a case where both selectors are used on the same stylesheet, which style will be applied to the list items?

Let's go back to our weight system to calculate the specificity of both selectors.

For .list > li, the weight of one class selector is 10 and the weight of an element selector is 1. Combined their sum is 11.

For ul > li, the weight of one element selector is 1. There are two element selectors used, so their sum is 2.

Which of the color values do you will think will be applied?

If you said the color of the .list>li selector will be applied, you got it right. It has a higher specificity value than the other selector.

Let's try another example. Given this element:

This is a paragraph

and these styles

#div-1 > .second-block > .text { color: blue } .first-block > #div-2 > #paragraph { color: red }

Try to calculate the specificity and guess which color value will apply.

This is the result:

Let's use our weight system to understand why the color value of the second selector is applied.

For #div-1 > .second-block > .text, we have one ID selector and two class selectors. The sum of their weights is 100 + 10 + 10 = 120.

For .first-block > #div-2 > #paragraph, we have one class selector and two ID selectors. The sum of their weights is 10 + 100 + 100 = 210.

That's why the value of latter selector is used.

You can try this example on your own to be sure that you get the hang of it.

    

     
First item 
    

Which color will be applied to the span if the following styles are in the stylesheet?

div#div1 > .first-list > #list-item > span { color: red; } #list > #list-item > #span { color: purple; } #div1 > #list > .first-list-item > .first-span { color: light-blue; }

Try to calculate the specificity and compare it with the result you get when you run the code.

Before we conclude this article, there are some important points to note.

Important Points about CSS Specificity

The weight assigned to a selector just gives us an idea of which rules get applied to an element. However, this does not always suffice.

For instance, you may assume that if you use more than 10 classes (weight >= 100) to target an element, the property values will override that of one ID selector. But this is not true. As long as the selector with more than 10 classes have no ID selector, the one ID selector will always take precedence over it.

Applying !important to the property value of any selector makes it the value that will be applied to the element. This happens regardless of the rank of the selector on the Specificity hierarchy.

Let's use an example to understand this.

 This is a paragraph 

If the following styles are applied

p { color: red !important; } .blue { color: blue; } #paragraph { color: purple; }

The value of the element selector p will be used because of the !important attached to the value.

However, if another selector has the !important tag attached to the same property, the value of the later selector is used.

That's why !important should be avoided because it makes it difficult override a style.

Generally, to style a specific element, it is more advisable to use a class. This makes it easier to override the styles if you ever need to do so.

Summary

From this article, we can see that CSS specificity is an important topic to understand because it can save you hours of debugging.

With this knowledge, you can easily find out why your styles are not being applied.

Here are the major points to take out of this article:

• Due to the cascading nature of CSS, if two rules are applied to the same element, the one that comes last is the one that will be used.
• CSS specificity is a set of rules that determine which style is applied to an element.
• The weight system is one way of calculating the specificity of different selectors. Here's a summary of the weights:

Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 

• !important overrides all other styles regardless of the specificity of the selector where it is used.

I hope you enjoyed reading this article.