סלקטור id לקביעת מזהה ייחודי

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

הסלקטור id משמש אותנו לקביעת מזהה ייחודי לאלמנט HTML כלשהו.

דוגמה:

<p>This is the main paragraph</p>

בדוגמה זו, הגדרנו פיסקה (תגית p) עם מזהה בשם mainp.

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

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

עיצוב אלמנטים עם סלקטור id

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

דוגמה:

#home_title {
	color:#ffff00;
	font-size:20px;
	font-weight:bold;
}

בדוגמה זו קבענו לאלמנט עם המזהה home_title הגדרות עיצוביות של צבע צהוב (גוון ffff00 הוא צהוב), גופן בגודל 20 פיקסלים וגופן מודגש.

נוכל לציין מפורשות כי המזהה home_title הוא מזהה של אלמנט מסוג h1 (כלומר כותרת ראשית) על ידי תיקון קל בהגדרת ב-CC, באופן הבא:

h1#home_title {
	color:#ffff00;
	font-size:20px;
	font-weight:bold;
}

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