Facebook
Twitter
RSSמדריך CSS – סלקטורים: ID ו- Class
בפרק הקודם דיברנו על כך שתחביר שפת CSS כולל בחירה של האלמנט שנרצה לעצב (סלקטור) והגדרת ערכים לתכונות שלו, וראינו את הדוגמא הבאה:
p {
color: red;
}
הדוגמא הזאת מגדירה שצבע הפונט של כל האלמנטים מסוג p יהיה אדום.
איך נגדיר שרק חלק מהאלמנטים יושפעו מהגדרת העיצוב הזאת?
סלקטור ID: בחירת תגיות לפי שם
לכל אלמנט ב- HTML ניתן להגדיר שם ייחודי ע”י שימוש בתכונה id. לדוגמא:
<body>
<p id="first">This is the first paragraph</p>
<p id="second">This is the first paragraph</p>
</body>
בדוגמא ישנן 2 פסקאות. לראשונה נתנו שם ייחודי first ולפסקה השניה נתנו את השם second.
כעת, תוכל להגדיר עיצוב לכל פסקה בנפרד. נשתמש בסלקטור ע”י ID, ע”י כך שנכתוב סולמית (#) ואת שם האלמנט שאנחנו רוצים לבחור. את הגדרת העיצוב נרשום כרגיל.
#first {
color: red;
}
#second {
color: blue;
}
במידה והשתמשנו בגישת ה- CSS בתוך המסמך, הרי שדף ה- HTML המלא שלנו יראה כך:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sample</title>
<style type="text/css">
#first {
color: red;
}
#second {
color: blue;
}
</style>
</head>
<body>
<p id="first">This is the first paragraph</p>
<p id="second">This is the first paragraph</p>
</body>
</html>
ובהרצה בדפדפן נקבל:
סלקטור Class: קישור בין סגנון לבין אלמנטים
ראינו שסלקטור לפי ID מאפשר לנו לבחור אלמנט ע”פ השם שלו ולפיו לקבוע סגנון, וזאת אכן שיטה טובה כאשר יש לנו אלמנט בודד בדף שנרצה להחיל עליו את הסגנון שהגדרנו. אבל, אם יש לנו רשימה של 100 פריטים, ונרצה שהזוגיים יהיו צבועים באדום והאי זוגיים יהיו בכחול – איך נעשה זאת? הרי לא נגדיר סגנון עבור כל אלמנט בנפרד… ולכן, נשתמש ב- Class.
שימוש ב- Class מאשר לנו לסווג אלמנטים לא משנה מאיזה סוג הם, בלי קשר לשמם או לכמות שלהם ולהחיל עליהם עיצוב.
לדוגמא, נניח שיש לנו את דף ה- HTML הבא:
<html>
<head>
<title>CSS Sample</title>
</head>
<body>
<h1>Products</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
שנראה כך:
כעת, נרצה להגדיר שכל הפריטים במקומות שהזוגיים יהיו צבועים באדום והאי זוגיים יהיו בכחול. לכן, נגדיר לכל פריט class.
<ul>
<li class="odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd">Item 3</li>
<li class="even">Item 4</li>
<li class="odd">Item 5</li>
</ul>
כעת, נוכל להגדיר סגנון אחד לפריטים הזוגיים וסגנון אחר לפריטים האי זוגיים. נשתמש בסלקטור מסוג class: נרשום נקודה ואחריה את שם ה- class שאנחנו רוצים להחיל עליו את העיצוב, ואז סוגריים מסולסלים ואת העיצוב עצמו:
.even {
color: red;
}
.odd {
color: blue;
}
חשוב להקפיד לתת ל- classים שמות משמעותיים.
ונקבל את התוצאה הבאה:
הערות
1. ניתן להגדיר classים על סוגים שונים של אלמנטים
למשל, אם נרצה להחיל את הסגנון העיצובי שהגדרנו גם על הכותרת מסוג h1, ניתן לעשות זאת:
<h1 class="even">Products</h1>
ולקבל את התוצאה:
2. ניתן להגדיר יותר מ- class אחד על אלמנט.
למשל, ניתן להגדיר גם את הסגנון הזה:
.selected {
background-color: gray;
}
ואז להחיל את ה- class הזה על אלמנט גם אם יש לו כבר class אחר, פשוט ע”י רווח בין שני ה- classים.
<ul>
<li class="odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd selected">Item 3</li>
<li class="even">Item 4</li>
<li class="odd">Item 5</li>
</ul>
והתוצאה:
בסה”כ יראה דף ה- HTML שבדוגמה כך:
<!DOCTYPE html>
<html>
<head>
<title>CSS Sample</title>
<style type="text/css">
.selected {
background-color: Gray;
}
.even {
color: red;
}
.odd {
color: blue;
}
</style>
</head>
<body>
<h1>Products</h1>
<ul>
<li class="odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd selected">Item 3</li>
<li class="even">Item 4</li>
<li class="odd">Item 5</li>
</ul>
</body>
</html>
תגובות בפייסבוק