לימוד CSS » סלקטורים (Selectors) ב-CSS שכדאי להכיר

סלקטורים (Selectors) ב-CSS שכדאי להכיר

נכתב ע"י יוחאי ירמיהו

במדריך הקודם דיברנו על תחביר CSS ונגענו קצת בנושא של סלקטורים. במאמר הזה ננסה לדבר על סלקטורים ותגיות HTML נפוצות שכדאי להכיר כאשר אנחנו יוצרים עמוד באמצעות קוד HTML. בנוסף נדבר גם על איך אפשר להגדיר סלקטור בעמוד ולטרגט אותו באמצעות הוספת שם ID או באמצעות הגדרת Class.

סלקטורים גלובליים ונפוצים

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

סלקטור *

הסימן * מאפשר לנו לשנות באמצעות קוד CSS את כל האלמנטים הקיימים בקוד HTML בעמוד. זאת אומרת שבאמצעות הסימן הזה אנחנו יכולים להגדיר את הצבע של הטקסט, סוג הפונט, גודל הטקסט ועוד… באופן גלובלי לכל תגית HTML.

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

* {
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
   color: #000;
}

סלקטור html

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

html {
   background: #000;
   padding: 20px;
}

סלקטור body

בדומה לסלקטור של HTML גם באמצעות body אנחנו יכולים לבצע שינויים שיכולו על כל העמוד כמו שינוי צבע או הוספת שוליים. התגית של body היא תגית בת של html וזה אומר שקוד שאנחנו מכניסים לתגית body יהיו מתחת לקוד של תגית html.

body {
   background: #000;
   padding: 20px;
}

סלקטורים של כותרות H1-H6

כאשר אנחנו מגדירים כותרות HTML אנחנו מגדירים אותם באמצעות תגיות H1 (הכותרת הגדולה ביותר) ועד לתגית H6 הכותרת הקטנה ביותר. באמצעות סלקטורים של כותרות נוכל להגדיר פונט נפרד לכותרות בעמודים, נוכל להגדיר להם צבע אחר, נוכל לשנות את המשקל של הפונט ועוד.

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

h1, h2, h3, h4, h5, h6 {
   color: #444444;
   font-weight: bold;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 35px;
}

סלקטור של פסקאות P

אחד הסלקטורים הנפוצים בעמוד HTML הוא של פסקאות שאנחנו כותבים באמצעותם טקסט עם התגית <p>. בדרך כלל נרצה להגדיר לפסקאות השונות בעמוד צבע טקסט, גודל פונט, מרווח שורות, ועוד… גם השורה הזאת שאתם קוראים עכשיו היא פסקה.

p {
   font-weight: normal;
   padding: 6px 0px 6px 0px;
   font-size: 18px;
   line-height: 26px;
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
}

עבודה עם רשימות ul, li, ol

אם אנחנו יוצרים רשימות בקוד HTML אז יש לנו את האפשרות לערוך אותם. בדרך כלל לתגית HTML של רשימה יש תגית עוטפת של <ul> או <ol> ותגית פנימית של <li>.

במידה ונרצה לערוך את כל הרשימות בעמוד באמצעות קוד CSS נוכל להשתמש בקוד הבא:

ol, ul {
   line-height: 29px;
   font-weight: normal;
   display: block;
   padding: 0px 20px 0px 0px;
   margin: 10px 0px 10px 0px;
}

ol li,
ul li {
   padding: 5px 0px 5px 0px;
}

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

תגית נוספת שאנחנו רוצים להכיר ולשנות היא תגית <a> של קישורים לחיצים בעמוד. באמצעות קוד CSS אנחנו יכולים לשנות את הצבע ברירת מחדל הכחול שמגיע עם הדפדפן לכל צבע אחר שנבחר בהתאם לתבנית העיצוב שלנו.

a {
   color: #2020fe;
}

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

יצירת סלקטור מותאם עם תגית Class

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

בדרך כלל הצורה הנפוצה ביותר לטרגוט או תיוג של אלמנט בעמוד היא על ידי הוספת תגית Class לאלמנט. אפשר לבצע את ההוספה הזאת באמצעות יצירת <div> כפי שניתן לראות מתחת:

<div class='your-class'>
    // הקוד שאתם רוצים בעמוד
</div>

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

<p class='your-class'>הפסקה שאתם רוצים לשנות</p>

בקודים שהגדרנו מעל נרצה לשנות את המילה your-class לתגית שם שאתם רוצים להגדיר עבור כל אזור בעמוד שאתם רוצים לשנות באמצעות קוד CSS. ולאחר שנעשה את זה נוכל באמצעות קוד CSS לטרגט באופן ייחודי רק את התגית עם השם שהגדרנו.

במידה ואנחנו משתמשים בתגית שהגדרנו ל-class אז בדרך כלל נוכל להשתמש בתגית באמצעות קוד CSS בצורה הבאה. חשוב לציין שלפני השם של התגית class שהגדרנו יש להוסיף את הסימן של נקודה בשביל שזה יעבוד.

.your-class {
   padding: 50px;
}

כאשר אנחנו רוצים להוסיף את העיצוב לתגית קיימת שהיא לא <div> כמו הפסקה שהגדרנו מעל אז אפשר לטרגט את התגית באותה צורה כמו הדוגמא מעל ולשנות את העיצוב אבל נהוג להוסיף את שם התגית לפי ה-class שהגדרנו על מנת ליצור קוד יותר נקי ומסודר ועל מנת שלא נשנה קוד אחר אם בטעות הגדרנו את אותו ה-class לכמה אלמנטים שונים שהם לא פסקאות.

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

p.your-class {
   padding: 50px;
}

יצירת סלקטור מוגדר על ידי הגדרת ID

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

בנוסף באמצעות מזהה ID יש לנו גם את היכולת ליצור קישור עם מזהה שיאפשר לנו לגלול אל אזור מסוים בעמוד במידה והוא מכיל את המזהה (וזה לא משהו שאפשר לעשות באמצעות class).

בדומה להגדרה של Class עבור תגית HTML כאן אנחנו פשוט נשנה את המילה class למילה id ונגדיר את שם המזהה שאנחנו רוצים.

<div id='your-id'>
    // הקוד שאתם רוצים בעמוד
</div>

<p id='your-id'>הפסקה שאתם רוצים לשנות</p>

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

#your-class {
   padding: 50px;
}

p#your-class {
   padding: 50px;
}