סלקטורים נוספים | CSS

[מוטי אורן]

מדריך סלקטורים נוספים ב – CSS

--

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

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

את הסלקטור של ה – attribute כותבים בתוך סוגריים מרובעים, כך:

[attribute='value'] { color: blue; }

נעבור על זה. פתחנו עם סוגר מרובע, בחרנו את התגיות שה – Attribute שלהם שווה ל – value, והחלנו עליהם את צבע הטקסט 'כחול'.

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

element[attribute='value'] { color: blue; }

ונניח שאני רוצה להחיל את הצבע הכחול על תגיות input שה – type שלהם הוא text, נכתוב זאת כך:

input[type='text'] { color: blue; }

כל מה שייכתב בתגיות input שה – type שלהם הוא טקסט, ייצבע בכחול.
ניתן לבחור אלמנטים שהתכונה שלהם מתחילה במילה מסוימת, כך:

[attribute|='value'] { color: blue; }

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

[attribute^='value'] { color: blue; }

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

[attribute~='value'] { color: blue; }

או שמכילה אותיות מסוימות:

[attribute*='value'] { color: blue; }

כעת נבחר תכונה שמסתיימת במילה מסוימת:

[attribute$='value'] { color: blue; }

זה שימושי לצורך הדוגמה בתגיות img, שאפשר לעצב את התמונות שהסיומת שלהם היא PNG בצורה מיוחדת:

img[src$='.png'] { width: 300px; }

ואת התמונות שהסיומת שלהם היא JPEG בצורה שונה:

img[src$='.jpeg'] { width: 500px; }

כעת נעבור לפסאודו-קלאס (pseudo-class) סלקטורים:

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

התחביר של הסלקטורים האלו הוא כזה.

element:pseudo-class { color: blue; }

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

p:hover { color: blue; }

שאומר – כשהעכבר יעבור מעל האלמנט p, החוק של צבע כחול יחול על האלמנט.

אם נרצה שתגית ה – input שלנו תשתנה כשהיא תקבל פוקוס על ידי המשתמש (בלחיצה עליה וכדו'), נרשום זאת כך:

input:focus { background-color: blue; }

ניתן לבחור את הצאצא הראשון של אלמנט מסוים, על ידי first-child:

div:first-child { color: blue; }

אפשר לבחור לינקים שהמשתמש ביקר בהם:

a:visited { color: blue; }

קיימים עוד הרבה פסאודו-קלאס סלקטורים. לא נעבור עליהם כאן.

כעת נלמד על פסאודו-אלמנט (pseudo-element) סלקטורים:

פסאודו אלמנטים תפקידם לבחור חלקים מסויימים מתוך האלמנטים. לדוגמה,

p::first-line { color: blue; }

בוחר את השורה הראשונה בכל תגיות ה – p ומחיל עליהם את הצבע הכחול.

אנו יכולים לבחור את האות הראשונה כדלהלן:

p::first-letter { color: blue; }

אפשר להוסיף תוכן לפני אלמנטים ואחריהם כך:

p::before { content: 'somthing'; }

p::after { content: 'something else'; }

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

p::selection { background-color: gray; }

גם בפסאודו-אלמנטים קיימים הרבה סוגים, לא נעבור על כל זה כאן.
רק ניתן קישור למי שרוצה לעבור על כל רשימת הסלקטורים
|| https://www.w3schools.com/cssref/css_selectors.asp ||