תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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

מחבר:
בתאריך:

סלקטורים מאפשרים לבחור לאיזה אלמנטים להוסיף איזה כללי CSS. ב-CSS3 נוספו מספר רב של סלקטורים, ולכן אנחנו יכולים להיות מאוד מדויקים בבחירת האלמנטים שעליהם נפעיל את כללי העיצוב. באמצעות הסלקטורים החדשים אנחנו יכולים להכיל את כללי העיצוב לפי attributes, לפי התאמה ל-regular expression, לפי מיקום בהיררכיה וסלקטורים חדשים של מחלקות (class) ומזהים (id). 

 

סלקטורים של attributes

מחלקות (class) ומזהים (id) שימשו לאבחנה בין אלמנטים שונים בדף אינטרנט כבר בגרסאות קודמות של CCS, אבל CSS3 מאפשר בחירה על סמך כל attribute של HTML. לדוגמה, על סמך href, name וכיו"ב. כדי לבחור ב-attribute בתור סלקטור, נוסיף אותו בתוך סוגריים מרובעים משמאל לתכונות, באופן הבא [attribute]. בוא נראה את הדוגמה הבאה. רשימת מכולת שבה כל שורה מקבלת שם באמצעות attribute מסוג name.

<ul>
  <li name="food-fruit">אפרסמון</li>
  <li name="food">לחם</li>
  <li name="food-veg">גזר</li>
  <li name="food-veg">מלפפון</li>
  <li>מברשת שיניים</li>
</ul>

אם אנחנו רוצים לבחור בכל האלמנטים שה-attribute שלהם הוא name, זה הקוד שבו נשתמש:

[name] {color: orange;}

נסתכל על התוצאה:

 

שימוש בסלקטורים לבחירת אלמנט על סמך attribute

עכשיו, אם נרצה לבחור על סמך attribute וערך. נוסיף את הערך ל-attribute בתוך הסוגריים המרובעים ["attribute="value]. לדוגמה, אם ה-attribute הוא food-fruit:

[name="food-fruit"] {color: orange;}

כך נראית התוצאה:

 

שימוש בסלקטורים לבחירת אלמנט על סמך attribute

 

אנחנו רואים שההשפעה היא רק על האלמנט ששמו food-fruit.

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

li[name="food-fruit"] {color: orange;}

 

דוגמאות נוספות לסלקטורים של attributes:

כדי לבחור רק בלינקים מסוימים:

a[href='']{}

כדי לבחור רק בתמונות מסוימות:

img[src='images/img.jpg']{}

בחירה באלמנטים של טופס:

input[type='textarea']{}

דוגמה נוספת לבחירה באלמנטים בטופס:

input[type='email']{}

 

בחירה באלמנטים ריקים

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

div:empty{}

הסלקטור מועיל במיוחד כשרוצים להעלים אלמנטים ריקים:

div:empty{display: none;}

 

בחירה באלמנטים על בסיס ביטויים רגולריים

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

אם אנחנו רוצים שכל מה שמתחיל בביטוי-food יושפע, נשתמש ב- =^.

[name^="food"] {color: red;}

אם אנחנו רוצים שכל מה שמופיע בו הביטוי food יושפע, ללא תלות במיקום, נשתמש ב- =*.

[name*="food"] {color: red;}

אם אנחנו רוצים שרק מה שמסתיים בביטוי- food יושפע, נשתמש ב- =$.

[name$="food"] {color: red;}

 

סלקטורים שמבוססים על מיקום בהיררכיה

אם אנחנו רוצים לבחור אלמנטים על בסיס מיקומם בהיררכיה, נוכל להשתמש בסלקטור ()nth-child:

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

li:nth-child(2) {color: red;}

את זה אפשר לנסות לבד.

באופן דומה, אם רוצים לבחור אלמנטים מסוף הרשימה, אז משתמשים ב-()nth-last-child: , לדוגמה האלמנט השני מהסוף ברשימה יכול להראות כך:

li:nth-last-child(2) {color: red;}

זה המקום להזכיר סלקטורים שקיימים עוד מימי CSS2. הראשון הוא first-child: שמתייחס לאלמנט הראשון ברשימה, והאחרון הוא last-child: שמתייחס לאלמנט האחרון ברשימה. השימוש בהם הוא פשוט מאוד, ואני משאיר לקוראים לנסות את השימוש בהם.

 

סלקטור מאוד שימושי ברשימות ארוכות או טבלאות, הוא סלקטור שייתן לנו דגם פסים. לדוגמה, רקע אפור כהה לשורות האי-זוגיות (odd), ורקע אפור בהיר לשורות הזוגיות (even).

li:nth-child(even) {background-color:#F8F8F8;}
li:nth-child(odd) {background-color:#787878;}

נצפה בתוצאה:

 

סלקטורים מבוססי היררכיה של CSS3

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

li:nth-child(3n){
    color: orange;
}

וכן זה נראה ברשימה לא מסודרת (ul):

  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

 

כמובן, שניתן לבחור כל מספר של n שרוצים (2n,3n,4n), וכיו"ב.

 

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

li:nth-child(3n+1){
    color: orange;
}
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

והקוד הבא יתחיל את הספירה מהאלמנט השני:

li:nth-child(3n+2){
    color: orange;
}
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

 

סלקטורים חדשים למחלקות (class) ולמזהים (id)

מחלקות ומזהים (claas ו-id) שימשו רבות לבחירת אלמנטים בגרסאות קודמות של CSS, אולם CSS גרסה 3, מציע לנו בחירה הרבה יותר מדויקת של האלמנטים הרצויים לנו. הסלקטור הכי שימושי הוא סלקטור not, שמאפשר לנו להימנע מבחירת מחלקות מסוימות. המבנה הוא  (not(.class:סלקטור. לדוגמה, בקוד ה-html המצורף, אנחנו מעוניינים לצבוע את כל הפסקאות, לבד מהפסקאות ששייכות ל-class מסוג veg, שאנחנו לא רוצים לצבוע.

<ul>
  <li class="food fruit">אפרסמון</li>
  <li class="food">לחם</li>
  <li class="food veg">גזר</li>
  <li class="food veg">מלפפון</li>
  <li>מברשת שיניים</li>
</ul>

קוד ה-CSS ייראה כך:

li:not(.veg) {color:orange;}

בתוצאה, כל הפסקאות נצבעות לבד מאילו ששייכות למחלקה veg:

 

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

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

li:not(.veg):not(.fruit) {color:orange;}

סלקטורים מועילים לטפסים

במקרה שתרצו לעצב באופן שונה כפתור או שדה במצב enabled או disabled, תוכלו לעשות זאת באמצעות הסלקטורים הבאים :

input:enabled{}
input:disabled{}

והסלקטור :checked מאפשר לעצב אלמנט מסוג radio או checkbox בתנאי שהוא נבחר. כך זה נראה:

input[type=checkbox]:checked{}

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

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?

 

תמונת המגיב

שחר בתאריך: 01.06.2016

מדריך איכותי וברור. תודה רבה יוסי!!!

תמונת המגיב

יוסי בן הרוש בתאריך: 01.06.2016

בכיף, שחר.

תמונת המגיב

אבי44 בתאריך: 03.11.2017

תודה רבה על המדריך המעולה! יש טעות. צריך לתקן את disabe ו ebable ל disabed ו ebabled

תמונת המגיב

יוסי בן הרוש בתאריך: 04.11.2017

נכון. אתה צודק, אבי 44. תקנתי.

תמונת המגיב

לירון בתאריך: 22.04.2018

הסברים ברמה מאוד גבוהה .. אם היה אפשר להוסיף סרטונים כמו שעשיתם בccs זה היה עוד יותר מושלם . תודה רבה על הכל !

תמונת המגיב

יוסי בן הרוש בתאריך: 22.04.2018

תודה רבה, לירון. לא מאמין שיהיה לי זמן בקרוב.

תמונת המגיב

אדר בתאריך: 08.07.2023

יוסי היקר! תודה רבה מכל הלב על כל המדריכים הכל הכל מוסבר בטוב טעם ופשטות תבורך!