סלקטור class לשיוך למחלקה עיצובית

מהו סלקטור class בקוד HTML

הסלקטור class משמש אותנו לקביעת מחלקה עבור מספר אלמנטים ב-HTML.

ניתן לקבוע אלמנטים שונים ב-HTML שיהיו באותה מחלקה, כלומר, עם אותו ה-class.

דוגמה:

<div id="main_article" class="article">
	<p>
		First paragraph
	</p>
	<p>
		Second paragraph
	</p>
	<p class="summary">
		Third paragraph
	</p>
</div>

בקוד זה הגדרנו מבנה מקונן של כמה פיסקאות (תגית p) בתוך תגית div המייצג מאמר כלשהו.

את האלמנט הראשי שעטוף בתגית div הגדרנו עם המחלקה article ועם המזהה הייחודי main_article. כלומר, נוכל לקבוע אלמנטים נוספים באותו דף HTML שיהיו עם המחלקה article, אבל לא יהיו עוד אלמנטים עם המזהה הייחודי main_article.

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

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

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

עיצוב אלמנטים ששייכים ל-class מסויים

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

דוגמה:

.article{
	color:#000000;
	font-size:18px;
}

#main_article{
	font-weight:bold;
}

.article .summary{
	text-decoration:underline;
}

דוגמה זו מעצבת את קטע ה-HTML שראינו בדוגמה הקודמת.

כל האלמנטים מהמחלקה article יהיו עם גופן בצבע שחור (גוון 000000 הוא שחור) ובגודל גופן של 18 פיקסלים.

האלמנט עם המזהה הייחודי main_article יהיה גופן מודגש (bold).

האלמנט עם המחלקה summary שבקונן בתוך האלמנט עם המחלקה article יהיה עם טקסט מעוצב בקו תחתי. נשים לב כי בהגדרת העיצוב האחרונה, הרווח שבין article ובין summary מצביע על מבנה היררכי (אלמנט עם המחלקה summary שנמצא בתוך אלמנט עם המחלקה article).

הנחיות לעיצוב אלמנטים ב-CSS

נדגיש מספר כללים חשובים להבנת ה-CSS.

בהתייחסות למחלקה נשים נקודה (.) לפני שם המחלקה. בהתייחסות למזהה נשים סולמית (#) לפני המזהה. בהתייחסות לתגית לפי סוג התגית, לא נשים כל סימן לפני התגית.

דוגמה:

h1{
	font-size:24px;
}

.title{
	font-size:24px;
}

#home_title{
	font-size:24px;
}

ניתן להצמיד תגית ומזהה, תגית ומחלקה או מחלקה ומזהה.

דוגמה:

h1.title{
	text-decoration:underline;
}


h1#home_title{
	text-decoration:underline;
}

.title#home_title{
	text-decoration:underline;
}

בדוגמה זו, ההגדרה הראשונה מתייחסת לתגית h1 עם המחלקה title. ההגדרה השניה מתייחסת לתגית h1 עם המזהה home_title. ההגדרה השלישית מתייחסת לאלמנט כלשהו עם המחלקה title והמזהה home_title.

נשים לב למקרים בהם יש רווח בין ההגדרות השונות (הרווח מצביע על מבנה היררכי של האלמנטים) לבין מקרים בהם אין רווח בין ההגדרות השונות.

דוגמה:

.article p span.link{
	color:#0000ff;
}


.article p span .link{
	color:#0000ff;
}

בהגדרה הראשונה, נקבע צבע כחול (גוון 0000ff הוא כחול) לאלמנט עם התגית span שמוגדר עם המחלקה link, והוא בתוך פיסקה (תגית p) שבתוך אלמנט עם המחלקה article.

בהגדרה השניה, נקבע צבע כחול לאלמנט כלשהו שמוגדר עם המחלקה link, והוא בתוך תגית span שבתוך פיסקה (תגית p) שבתוך אלמנט עם המחלקה article.

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