סלקטורים (selectors) בשפת CSS

סלקטורים (selectors) בשפת CSS

  • פרסומת

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

סוגי סלקטורים

בדוגמאות הבאות נשתמש בקטע ה-HTML הבא בשביל לראות איך ניתן לבחור את האלמנטים שבו.

<h1>כותרת דרגה 1</h1>
<h1 id="heading" class="center">כותרת דרגה 1</h1>
<p class="center">פיסקה</p>
<input type="text" name="my-input" />

element selector

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

h1 {color:red}

id selector

סלקטור זה בוחר אלמנטים על פי ה-id שלהם. בשביל לבחור אלמנטים על פי ה-id שלהם יש לכתוב סולמית #

ולאחריה את ה-id של האלמנט. לדוגמה, בשביל לבחור את הכותרת השניה בלבד במסמך הנ״ל ולמרכז אותה ניתן לעשות זאת כך:

#heading {text-align: center}

יש לזכור ש-id של אלמנט הוא כמו תעודת הזהות שלו, ולפיכך הוא חייב להיות ייחודי. בנוסף, id לא יכול להתחיל במספר.

class selector

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

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

.center {text-align: center}

שימו לב שכל האלמנטים עם הקלאס center

ייבחרו באופן הזה.

attribute selector

סלקטור זה בוחר אלמנטים על פי האטריביוטים שלהם. אטריביוטים הם מאפיינים של אלמנטים המוגדרים בתוך התגית של האלמנט. לדוגמה, לאלמנט <p name="my-paragraph">

יש אטריביוט בשם name שהערך שלו הוא my-paragraph.

בשביל לבחור אלמנטים באופן הזה בשפת CSS יש להשתמש בתחביר [attribute_name="attribute value"]

לדוגמה, בשביל לבחור את האלמנט עם האטריביוט name שהערך שלו הוא my-input בדוגמה הנ״ל זה יבוצע כך:

[name=my-input] {font-family: arial}

קיבוץ סלקטורים

ניתן לקבץ מספר סלקטורים על ידי שימוש בפסיקים. לדוגמה, בשביל לבחור את הכותרות, הפסקאות וה-input ולשנות את הגודל של הפונט שלהם יש לכתוב:

h1, p, input {font-size: 22px}

שילוב סלקטורים

ניתן לשלב מספר סלקטורים ביחד בשביל למקד את הבחירה לאלמנט ספציפי. לדוגמה:

h1#heading.center {font-family: arial}

הקוד הנ״ל בוחר את האלמנט מסוג h1

עם ה-id heading והקלאס center. שימו לב שבמקרה הנ״ל השילוב בין הסלקטורים מיותר משום שגם ככה ישנו רק אלמנט אחד עם id="heading", אך הרעיון ברור.