סלקטורים | שפת CSS

[מוטי אורן]

מדריך סלקטורים בסיסיים ב - CSS

--
קודם כל נתחיל מהשאלה איפה כותבים את ה – CSS. את ה – CSS כותבים (יש יותר מאפשרות אחת, אבל כרגע נלך עם האופציה הזאת) בתוך תגית <style> שממוקמת ב - head כדלהלן:

<style>
    p { color: blue; }
</style>

באמצעות CSS ניתן לעצב תגיות בדף ה – HTML שלנו. בשביל זה אנחנו צריכים להבין את המושג שנקרא סלקטורים (selectors) ובתרגום לעברית 'בוחרים'. תפקיד הסלקטורים הוא כשמם: לבחור תגיות/רכיבים בדף ה – HTML בכדי שנוכל לעצב אותם.

יודעים מה? נתחיל שנייה מתחביר פשוט של CSS, בשביל להבין מדוע אנו צריכים את הסלקטורים האלו:

p { color: blue; }

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

אז הנה רשימת סלקטורים בסיסיים נחוצים:

#id { color: blue; }

אז בדוגמה הזאת בחרנו תגית לפי id מסויים שהגדרנו לתגית.

להזכירכם, את ה – id מגדירים כתכונה ב – HTML כך:

<p id="paragraph">bla bla bla</p>

כך שאם נרצה לעצב את התגית הזאת ב - CSS נכתוב כך:

#paragraph { color: blue; }

כאשר לפני ה – ID נכתוב את הסימן '#' (סולמית).

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

<p class="paragraphs" >bla bla bla</p>
<p class="paragraphs">od bla bla bla</p>

וכעת, ל – CSS:

.class { color: blue; }

ובמקרה שלנו:

.paragraphs { color: blue; }

מה שבעצם ייקרה הוא שכל התגיות שמוגדרות כ – class של paragraphs, יקבלו עת העיצוב שנכתב בין הסוגריים המסולסלים. ובמקרה שלנו, צבע טקסט כחול.

ישנה אפשרות להגדיר עיצוב רק על תגית מסויימת שמוגדרת ל – class מסויים. כדלהלן:

p.paragraphs { color: blue; }

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

ניתן גם לבחור את כל האלמנטים בדף באמצעות '*' (כוכבית):

* { box-sizing: border-box; }

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

ניתן לבחור באמצעות כמה סלקטורים, על ידי הסימן ',' (פסיק).

#paragraph, .paragraphs, p { color: blue; }

אפשר לבחור אלמנט שמקונן ישירות בתוך אלמנט אחר (המושג הזה נקרא child מלשון 'ילד') באמצעות הסלקטור '<':

div > .paragraphs { color: blue; }

בדוגמה שלעיל בחרנו את כל האלמנטים שמוגדרים ב – class של paragraphs, שממוקמים בתוך תגית div.

ניתן גם לבחור את כל האלמנטים של class שנקרא paragraphs, לכל רמה של עומק (אפילו שאינם מקוננים ישירות בתוך התגית div) באמצעות space (ריווח).

div .paragraphs { color: blue; }

אנחנו יכולים גם לבחור את האלמנטים האחים של תגית מסויימת (שממוקמים מיד לאחריה) באמצעות הסימן '+' (פלוס):

div + .paragraphs { color: blue; }

כאן בחרנו את ה – class של paragraphs, שממוקמים מיד לאחר תגיות div.
אפשר לבחור גם כן את כל האחים של div (שממוקמים לאחריו) באמצעות הסימן '~' (טילדה).

div ~ .paragraphs { color: blue; }

טוב, נראה לי שזה מספיק לסלקטורים הבסיסיים, במדריך הבא בעז"ה נעבור על עוד סלקטורים.
בהצלחה!