וובמאסטר - תיכנות ובניית אתרים

מדריך CSS - סלקטורים: ID ו- Class

גיא בורשטיין/‏ 3 יוני, 2003
F+
F-

בפרק הקודם דיברנו על כך שתחביר שפת 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
>

ובהרצה בדפדפן נקבל:

CSS סלקטורים

סלקטור 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
>

שנראה כך:

CSS סלקטורים

כעת, נרצה להגדיר שכל הפריטים במקומות שהזוגיים יהיו צבועים באדום והאי זוגיים יהיו בכחול. לכן, נגדיר לכל פריט 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ים שמות משמעותיים.

ונקבל את התוצאה הבאה:

CSS סלקטורים

הערות

1. ניתן להגדיר classים על סוגים שונים של אלמנטים

למשל, אם נרצה להחיל את הסגנון העיצובי שהגדרנו גם על הכותרת מסוג h1, ניתן לעשות זאת:

<h1 class="even">Products</h1>

ולקבל את התוצאה:

CSS סלקטורים

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
>

והתוצאה:

image

בסה”כ יראה דף ה- 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
>

גיא בורשטיין

גיא בורשטיין הוא מומחה טכנולוגיות פיתוח בחברת מיקרוסופט ואחראי על הקשר בין מיקרוסופט לקהילת המפתחים בארץ.
תגיות: CSS‏  /  מדריך‏  /  בניית אתרים‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות