cascading style sheets reference

בוררי תכונות

הסבר

בוררי התכונות מרחיבים באופן משמעותי את בוררי המעמד והזהות שהכרנו ב-CSS1. למרות שהתחביר הוא מאוד שונה, בוררי המעמד והזהות הם היבט אחד פשוט של מה ניתן להשיג בעזרת בורר התכונות.

בראש ובראשונה, מהי תכונה? אם אינכם מכירים את המונח, תכונות הן המאפיינים של אלמנטים של HTML מספר דוגמאות פשוטות הן: HREF, TITLE (כותרת), WIDTH (רוחב) ו-CLASS (מעמד). בעזרת בוררי תכונה אתם יכולים לבחור אלמנטים על בסיס התכונות והערכים שלהם.

לדוגמא, אתם יכולים לבחור בכל קישור בעזרת HREF מסויים, או בכל דמות, בעזרת טקסט ALT ספציפי.

תחביר

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

קיימים ארבעה סוגים של תנאים:

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

בורר התכונה בוחר אלמנט כאשר שני התנאים המסוימים נפגשים והבורר הכללי בוחר את האלמנט.

החלק הראשון של בורר התכונה אמור להיות לכם מאוד מוכר; הוא פשוט אחד מתוך הבוררים השונים שאותם אתם מכירים (לדוגמא בורר אלמנט ה-HTML).

חלק הבורר המגדיר את התנאים לתכונות מוכל בתוך סוגריים מרובעים "[" and "]". התחביר עבור כל אחד מן התנאים המתוארים למעלה הוא:

כאשר יש לקבוע תכונה, פשוט שימו את שם התכונה בתוך סוגריים מרובעים. לדוגמא,
A[title]
בוחר כל אלמנט A כאשר קובעים כותרת. זאת אומרת, אלמנטים בצורת:
<A title="value">
ערך הכותרת אינו חשוב, אלא רק העובדה שהיא קבועה.
כאשר יש לקבוע לתכונה ערך ספציפי, הצורה משתנה מעט. לדוגמא,
A[title="President"]
יבחר רק ישורים בעלי כותרת השווה בדיוק ל- "President".
כאשר תכונה כלשהי חייבת לכלול ערך בין רשימת ערכיה, המופרדים במרווח, הצורה, שוב, היא מעט שונה. כעת, לדוגמא, הצורה היא:
A[title~="value"]
ולבסוף, כאשר תכונה חייבת לכלול ערך בין רשימת ערכיה, המופרדים במקפים, הצורה היא:
BODY [LANG|="en"]

שימוש

בוררי תכונה מספקים גירסה הרבה יותר מתוחכמת של בורר המעמד. תהיה להם חשיבות רבה עם XML.