ב- CSS, סלקטורים הם דפוסים המשמשים לבחירת רכיבי DOM.
הנה דוגמה לשימוש בבוררים. בקוד הבא, aוכן h1הם בוררים:
a { color: black; } h1 { font-size 24px; }גיליון בגידות של בוחרים נפוצים
headבוחר את האלמנט עם headהתג
.red בוחר את כל האלמנטים עם הכיתה 'אדומה'
#nav בוחר את האלמנטים עם מזהה 'nav'
div.rowבוחר את כל האלמנטים עם divהתג והמחלקה 'שורה'
["]בוחר את כל האלמנטים עם aria-hiddenהתכונה עם הערך "נכון"
- בורר תווים כלליים. בוחר את כל רכיבי DOM. ראה להלן שימוש בו עם סלקטורים אחרים
אנו יכולים לשלב סלקטורים בדרכים מעניינות
כמה דוגמאות:
li aקומבינטור צאצאי DOM. כל aהתגים שהם ילד של liתגים
div.row *בוחר את כל האלמנטים שהם צאצאים (או צאצאים) של האלמנטים עם divהתג וכיתת 'שורה'
li > aמשלב ההבדל. בחר צאצאים ישירים, במקום כל הצאצאים כמו בוחרי הצאצאים
li + aהמשלב הסמוך. היא בוחרת את האלמנט שקודם לו מיד האלמנט הקודם. במקרה זה, רק הראשון aאחרי כל אחד li.
li, aבוחר את כל aהאלמנטים ואת כל liהאלמנטים.
li ~ aקומבינטור האחים. בוחר aאלמנט בעקבות liאלמנט.
בורר פסאודו או כיתות מבניות פסאודו
אלה שימושיים גם לבחירת אלמנטים מבניים מה- DOM.
הנה כמה מהם:
:first-child כוון לאלמנט הראשון מיד בתוך (או ילד של) אלמנט אחר
:last-child מקד אלמנט האחרון מיד בתוך (או ילד של) אלמנט אחר
:nth-child()מקד אלמנט ה- n מיד בתוך (או ילד של) אלמנט אחר. מודה מספרים שלמים, even, odd, או נוסחאות
a:not(.name)בוחר את כל aהאלמנטים שאינם .nameמהכיתה
::afterמאפשר הכנסת תוכן לדף מ- CSS, במקום HTML. התוצאה הסופית אמנם לא נמצאת ב- DOM, אך היא מופיעה בדף כאילו היא כן. תוכן זה נטען לאחר רכיבי HTML.
::beforeמאפשר הכנסת תוכן לדף מ- CSS, במקום HTML. התוצאה הסופית אמנם לא נמצאת ב- DOM, אך היא מופיעה בדף כאילו היא כן. תוכן זה נטען לפני רכיבי HTML.
אנו יכולים להשתמש בכיתות פסאודו כדי להגדיר מצב מיוחד של אלמנט של ה- DOM. אבל הם לא מצביעים על אלמנט בפני עצמם.
כמה דוגמאות:
:hover בוחר אלמנט שמועבר על ידי מצביע עכבר
:focus בוחר אלמנט שמקבל מיקוד מהמקלדת או מתכנית
:active בוחר אלמנט שמצביע העכבר לוחץ עליו
:link בוחר את כל הקישורים שטרם לחצו עליהם
:visited בוחר קישור שכבר לחצו עליו
מידע נוסף על בורר הילד התשיעי
nth-childהבורר הוא מח'-psuedo CSS לוקחת דפוס שבאמצעותו להתאים אחד או יותר אלמנטים ביחס עמד בין אחים.
תחביר
a:nth-child(pattern) { /* Css goes here */ }תבנית
הדפוסים המקובלים עליהם nth-childיכולים להגיע בצורה של מילות מפתח או משוואה של הטופס An + B.
מילות מפתח
מוזר
Odd מחזיר את כל האלמנטים המוזרים מסוג מסוים.
a:nth-childe(odd) { /* CSS goes here */ }אֲפִילוּ
אפילו מחזיר את כל האלמנטים השווים מסוג מסוים.
a:nth-childe(even) { /* CSS goes here */ }An + B.
מחזיר את כל האלמנטים התואמים למשוואה An + B עבור כל ערך שלם חיובי של n (בנוסף ל- 0).
לדוגמה, הדברים הבאים יתאימו לכל אלמנט עוגן שלישי:
a:nth-childe(3n) { /* CSS goes here */ }משחקים
CSS Diner הוא משחק רשת שמלמד כמעט כל מה שיש לדעת על שילוב סלקטורים.
הפניות נוספות
יש הרבה יותר בוחרי CSS! למד עליהם ב- CodeTuts, CSS-tricks.com או ברשת המפתחים של Mozilla.