גליונות סגנון מדורגים - CSS
Cascading Style Sheets
בוררי סגנון
Style Selectors
בוררי רכיבים
בורר *
בורר הכל *
, מאפשר לברור את כל
הרכיבים לעיצוב. למשל, אם נבקש להסיר את כל השוליים
ואת כל הדפנות של כל רכיבי התיבה נרשום ב־CSS:
*{ margin:0; padding:0; }
בורר #X
בורר מזהה #X
, מאפשר לברור רכיב
בודד לפי מאפיין id
. למשל, על מנת
לברור רכיב תמונה כגון:
<img id="myImg" src="myImg.png" />
משתמשים בקוד:
#myImg{ /* כאן יבואו הגדרות העיצוב */ }
בורר .X
בורר מחלקה .X
, מאפשר לברור קבוצת
רכיבים לפי מאפיין class
. למשל, על מנת לברור:
<img class="myImg" src="myImg.png" />
משתמשים בקוד:
.myImg{ /* כאן יבואו הגדרות העיצוב */ }
בורר X
בורר רכיב X
, מאפשר לברור את כל
הרכיבים מסוג מסויים. למשל, על מנת לברור רכיבי תמונה:
<img src="myImg.png" />
משתמשים בקוד:
img{ /* כאן יבואו הגדרות העיצוב */ }
בורר X , Y
בורר רכיבים רבים X , Y
, מאפשר לברור
מספר רכיבים מתוך רשימה מפוסקת. למשל, על מנת לברור רכיבי תמונה או חוזי:
<img src="myImg.png" /> <video controls="controls"> <source src="myVid.ogg" type="video/ogg" /> דפדפן זה לא תומך ברכיב video </video>
משתמשים בקוד:
img, video{ /* כאן יבואו הגדרות העיצוב */ }
בורר X + Y
בורר רכיב סמוך X + Y
, מאפשר לברור
רכיבים אשר נמצאים סמוך לרכיבים אחרים.
בורר X ~ Y
בורר רכיב עוקב X ~ Y
, מאפשר
לברור רכיבים אשר עוקבים אחר רכיבים אחרים.
מחלקה מדומה X:not(selector)
מחלקת שלילה X:not(selector)
, מאפשרת לברור
את כל הרכיבים אשר אינם עונים לתנאי הבורר.
מחלקה מדומה X:empty
מחלקת ריקם X:empty
,
מאפשרת לברור את כל הרכיבים הריקים.
מחלקה מדומה X:root
מחלקת שורש X:root
, מאפשרת לברור
את רכיב השורש. בסומנת מלל מקושר HTML יבחר רכיב
<html>
.
בוררי צאצאים
בורר X Y
בורר צאצא X Y
, מאפשר לברור רכיב
צאצא לרכיב אחר.
בורר X > Y
בורר צאצא ישיר X > Y
, מאפשר
לברור רכיבים אשר הם צאצאים ישירים לרכיבים אחרים.
מחלקה מדומה X:first-child
מחלקת ילד ראשון X:first-child
, מאפשרת לברור
ילד ראשון של הרכיב הנבחר.
מחלקה מדומה X:last-child
מחלקת ילד אחרון X:last-child
, מאפשרת לברור
ילד אחרון של הרכיב הנבחר.
מחלקה מדומה X:nth-child(n)
מחלקת ילד חיוביX:nth-child(n)
, מאפשרת לברור ילד של הרכיבים הנבחרים
על פי מספרו הסידורי.
tr:nth-child(3){ background-color:green; /* טבלה שורה שלישית רקע ירוק */ } tr:nth-child(3n){ background-color:green; /* טבלה כל שורה שלישית רקע ירוק */ } tr:nth-child(even){ background-color:green; /* טבלה כל שורה זוגית רקע ירוק */ } tr:nth-child(odd){ background-color:green; /* טבלה כל שורה אי-זוגית רקע ירוק */ } tr:nth-child(5n+2){ background-color:green; /* טבלה כל שורה חמישית החל משורה שנייה רקע ירוק */ } tr:nth-child(5n-1){ background-color:green; /* טבלה כל שורה חמישית החל משורה רביעית רקע ירוק */ } tr:nth-child(-n+3){ background-color:green; /* טבלה שלוש שורות ראשונות רקע ירוק */ }
מחלקה מדומה X:nth-last-child(n)
מחלקת ילד שלילי X:nth-last-child(n)
, מאפשרת לברור ילד מהסוף של הרכיבים
הנבחרים על פי מספרו הסידורי.
tr:nth-last-child(3){ background-color:green; /* טבלה שורה שלישית מהסוף רקע ירוק */ } tr:nth-last-child(3n){ background-color:green; /* טבלה כל שורה שלישית מהסוף רקע ירוק */ } tr:nth-last-child(even){ background-color:green; /* טבלה כל שורה זוגית מהסוף רקע ירוק */ } tr:nth-last-child(odd){ background-color:green; /* טבלה כל שורה אי-זוגית מהסוף רקע ירוק */ } tr:nth-last-child(5n+2){ background-color:green; /* טבלה כל שורה חמישית מהסוף החל משורה שנייה מהסוף רקע ירוק */ } tr:nth-last-child(5n-1){ background-color:green; /* טבלה כל שורה חמישית מהסוף החל משורה רביעית מהסוף רקע ירוק */ } tr:nth-last-child(-n+3){ background-color:green; /* טבלה שלוש שורות אחרונות רקע ירוק */ }
מחלקה מדומה X:nth-of-type(n)
מחלקת סוג ילד חיובי X:nth-of-type(n)
,
מאפשרת לברור סוג ילד מסויים של הרכיבים
הנבחרים על פי מספרו הסידורי. מדלגת על רכיבים מסוג שונה.
p:nth-of-type(3){ background-color:green; /* פיסקה שלישית רקע ירוק */ } p:nth-of-type(3n){ background-color:green; /* כל פיסקה שלישית רקע ירוק */ } p:nth-of-type(even){ background-color:green; /* כל פיסקה זוגית רקע ירוק */ } p:nth-of-type(odd){ background-color:green; /* כל פיסקה אי-זוגית רקע ירוק */ } p:nth-of-type(5n+2){ background-color:green; /* כל פיסקה חמישית החל מפיסקה שנייה רקע ירוק */ } p:nth-of-type(5n-1){ background-color:green; /* כל פיסקה חמישית החל מפיסקה רביעית רקע ירוק */ } p:nth-of-type(-n+3){ background-color:green; /* שלוש פיסקאות ראשונות רקע ירוק */ }
מחלקה מדומה X:nth-last-of-type(n)
מחלקת סוג ילד שלילי X:nth-last-of-type(n)
,
מאפשרת לברור סוג ילד מסויים מהסוף של הרכיבים
הנבחרים על פי מספרו הסידורי. מדלגת על רכיבים מסוג שונה.
p:nth-last-of-type(3){ background-color:green; /* פיסקה שלישית מהסוף רקע ירוק */ } p:nth-last-of-type(3n){ background-color:green; /* כל פיסקה מהסוף שלישית רקע ירוק */ } p:nth-last-of-type(even){ background-color:green; /* כל פיסקה זוגית מהסוף רקע ירוק */ } p:nth-last-of-type(odd){ background-color:green; /* כל פיסקה אי-זוגית מהסוף רקע ירוק */ } p:nth-last-of-type(5n+2){ background-color:green; /* כל פיסקה חמישית מהסוף החל מפיסקה שנייה מהסוף רקע ירוק */ } p:nth-last-of-type(5n-1){ background-color:green; /* כל פיסקה חמישית מהסוף החל מפיסקה רביעית מהסוף רקע ירוק */ } p:nth-last-of-type(-n+3){ background-color:green; /* שלוש פיסקאות אחרונות רקע ירוק */ }
מחלקה מדומה X:first-of-type
מחלקת סוג ילד ראשון X:first-of-type
,
מאפשרת לברור סוג ילד ראשון של הרכיב הנבחר.
מחלקה מדומה X:last-of-type
מחלקת סוג ילד אחרון X:last-of-type
,
מאפשרת לברור סוג ילד אחרון של הרכיב הנבחר.
מחלקה מדומה X:only-child
מחלקת ילד יחיד X:only-child
,
מאפשרת לברור ילד יחיד של הרכיב הנבחר.
מחלקה מדומה X:only-of-type
מחלקת סוג ילד יחיד X:only-of-type
,
מאפשרת לברור ילד יחיד מסוגו של הרכיב הנבחר.
בוררי מאפיין
בורר X[attribute]
בורר מאפיין X[attribute]
, מאפשר
לברור רכיבים אשר יש להם מאפיין מסויים.
בורר X[name="value"]
בורר ערך מאפיין X[name="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים.
בורר X[name*="value"]
בורר ערך מאפיין כלול X[name*="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים הכלול בו.
מחלקה מדומה X:lang(langCode)
מחלקת שפה X:lang(langCode)
,
מאפשרת לברור את כל הרכיבים שקיבלו או ירשו
את השפה המצויינת בהפעלה. אחריה יכול לבוא מקף וערך תת־שפה.
:lang(he){ font-weight:italic; /* כל המלל העברי נטוי */ }
בורר X[name|="value"]
בורר ערך מאפיין ראשי X[name|="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המתחיל עם ערך מסויים. אחריו יכול לבוא מקף וערך משני.
בורר X[name^="value"]
בורר ערך מאפיין מתחיל X[name^="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המתחיל עם ערך מסויים.
בורר X[name$="value"]
בורר ערך מאפיין מסיים X[name$="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
המסתיים עם ערך מסויים.
בורר X[name~="value"]
בורר ערך מאפיין מרווח X[name~="value"]
,
מאפשר לברור רכיבים אשר יש להם מאפיין מסויים
עם ערך מסויים מתוך רשימה מרווחת.
בוררי קישור
מחלקה מדומה X:link
מחלקת קישורים X:link
, מאפשרת לברור
את כל הקישורים בהם לא ביקרנו.
מחלקה מדומה X:visit
מחלקת מבוקרים X:visit
, מאפשרת לברור
את כל הקישורים בהם כן ביקרנו.
מחלקה מדומה X:hover
מחלקת מרוחפים X:hover
, מאפשרת לברור
את הרכיב מעליו מרחפים.
מחלקה מדומה X:active
מחלקת פעילים X:active
, מאפשרת לברור
את הרכיב הפעיל ברגע זה.
מחלקה מדומה X:target
מחלקת מיועדים X:target
, מאפשרת לברור
את רכיב היעד.
בוררי טופס
מחלקה מדומה X:focus
מחלקת ממוקדים X:focus
, מאפשרת לברור
את הרכיב הממוקד ברגע זה, על ידי עכבר או מקלדת.
מחלקה מדומה X:checked
מחלקת מסומנים X:checked
, מאפשרת לברור
את כל הרכיבים המסומנים.
מחלקה מדומה X:enabled
מחלקת מאופשרים X:enabled
, מאפשרת לברור
את כל הרכיבים המאופשרים.
מחלקה מדומה X:disabled
מחלקת חסומים X:disabled
, מאפשרת לברור
את כל הרכיבים החסומים.
רכיבים מדומים
אינם בדגם עצמי־המסמך, DOM
רכיב מדומה X::before
רכיב לפנים X::before
, מאפשרת להוסיף
תוכן לפני הרכיבים הנבחרים. אם למשל נרצה להוסיף
לפני כל תוכן רכיבי <code>
את
התיו LRE נרשום:
code::before{ content:'\202A'; }
המאפיין content יכול לקבל אחד או יותר מהערכים הבאים
- none מאפס את התוכן
- normal קובע את התוכן לברירת המחדל
- counter קובע תוכן למונה
- attr(attribute) קובע תוכן לפי אחד המאפיינים
- string קובע טקסט לתוכן
- open-quote קובע פתיחת ציטוט
- close-quote קובע סגירת ציטוט
- no-open-quote מסיר פתיחת ציטוט
- no-close-quote מסיר סגירת ציטוט
- url(url) קובע תוכן חיצוני
- inherit קובע הורשת תוכן ממעל
רכיב מדומה X::after
רכיב לאחור X::after
, מאפשרת להוסיף
תוכן אחרי הרכיבים הנבחרים. אם למשל נרצה להוסיף
אחרי כל תוכן רכיבי <code>
את
התיו PDF נרשום:
code::after{ content:'\202C'; }
רכיב מדומה X::first-line
רכיב שורה ראשונה X::first-line
,
מאפשר לברור שורה ראשונה בפיסקה.
רכיב מדומה X::first-letter
רכיב אות ראשונה X::first-letter
,
מאפשר לברור אות ראשונה בפיסקה.
רכיב מדומה X::selection
רכיב בחירה X::selection
,
מאפשר לברור את תוכן הדף אותו סימן המשתמש.
הערה: בדפדפן פיירפוקס יש להשתמש
ברכיב בחירה X::-moz-selection
.
אם למשל נרצה לצבוע את כל המלל הנבחר באדום נרשום:
::selection, ::-moz-selection{ color:red; }