כפי שראינו בפוסטים הקודמים (כאן 1 וכאן 2), יש מגוון אפשרויות להחיל עיצוב CSS-י על אלמנטים HTML-יים, על ידי שימוש ב- selector-ים (סלקטור של סוג אלמנט, סלקטור של class וסלקטור של id) וגם על ידי inline styling שמופיע כחלק מקוד ה- HTML עצמו.
ריבוי האפשרויות מאפשר סתירות - כלומר אנו יכולים להגיד לאותו אלמנט להיות מעוצב בכמה אופנים שונים, שסותרים זה את זה. איך הדפדפן מתמודד עם מצבים כאלו? התשובה היא - על ידי סדר קדימויות, ועל כך נדבר בפוסט זה.

דוגמא לכמה עיצובי CSS שונים על אותו אלמנט

נתחיל בדוגמה שתמחיש את הצורך בסדר הקדימויות ב- CSS.
נתחיל בקוד ה- HTML (כרגיל, למען התמציתיות אני אציג רק את ה- body):

<body>
    <h1>This is the heading!</h1>
    <p style="color: blue;" class="parStyle" id="paragraph1">
        This is the content of the page
    </p>
</body>

שימו לב לאלמנט של הפסקה, p. לאלמנט הזה יש inline styling וכמו כן שייכנו אותו ל- class בשם “parStyle” ויש לו גם id שערכו “paragraph1”.
קוד ה- CSS:

p {
	color: brown;
}

.parStyle {
	color: pink;
}

#paragraph1 {
	color: green;
}

שימו לב שהגדרנו:

  • עיצוב של אלמנטים מסוג פסקה, p
  • עיצוב למחלקה parStyle
  • עיצוב ל- id של הפסקה
  • עיצוב inline-י לפסקה

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

 

 

סדר קדימויות של selector-ים ב- CSS

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

 

 

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

 

 

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

סדר קדימויות ב- CSS - סיכום

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

סוג העיצוב סדר עדיפות
inline styling 1
id selector 2
class selector 3
element type 4