סלקטורי CSSExplained

53 of 53 rows

סלקטור↕	למה הוא תואם↕	דוגמה↕
בסיסיים
⤢type	כל אלמנט מסוג תגית זו.	button { }
⤢.class	אלמנטים שיש להם את המחלקה הזו.	.active { }
⤢#id	האלמנט היחיד עם ה-id הזה.	#header { }
⤢*	כל האלמנטים.	* { box-sizing: border-box; }
⤢:root	שורש המסמך; המקום הרגיל למאפיינים מותאמים אישית גלובליים.	:root { --gap: 1rem; }
⤢A, B	אלמנטים שתואמים ל-A או ל-B (קיבוץ).	h1, h2, h3 { }
מצרפים
⤢A B	כל B שהוא צאצא של A.	nav a { }
⤢A > B	B שהוא בן ישיר של A.	ul > li { }
⤢A + B	B מיד אחרי A, באותו הורה.	h1 + p { }
⤢A ~ B	כל B שבא אחרי A, באותו הורה.	h1 ~ p { }
מחלקות מדומות (מצב)
⤢:hover	האלמנט בזמן שהסמן מרחף מעליו.	a:hover { }
⤢:focus	האלמנט שממוקד במקלדת.	input:focus { }
⤢:first-child	אלמנט שהוא הילד הראשון של הוריו.	li:first-child { }
⤢:nth-child(n)	הילד ה-n; מקבל נוסחאות כמו 2n.	tr:nth-child(2n) { }
⤢:not()	אלמנטים שלא תואמים לאף סלקטור פנימי; מקבל רשימה החל מ-Selectors 4.	li:not(:first-child, .skip) { }
⤢:checked	תיבת סימון, לחצן בחירה או אופציה מסומנים.	input:checked { }
⤢:disabled	שדה קלט או לחצן מושבתים.	button:disabled { }
⤢:has()	הורה שמכיל התאמה לסלקטור הפנימי.	li:has(ul) { }
⤢:is()	כל סלקטור מהרשימה; הספציפיות היא הגבוהה ברשימה.	:is(ol, ul) li { }
⤢:where()	זהה ל-:is(), אבל עם ספציפיות אפס.	:where(ol, ul) li { }
⤢:focus-visible	מיקוד שצריך להציג טבעת, בדרך כלל מהמקלדת.	a:focus-visible { }
⤢:focus-within	אלמנט שהוא עצמו או אחד מצאצאיו ממוקד.	form:focus-within { }
⤢:last-child	אלמנט שהוא הילד האחרון של הוריו.	li:last-child { }
⤢:only-child	אלמנט בלי אחים.	p:only-child { }
⤢:nth-of-type(n)	האח ה-n מאותה תגית; מקבל נוסחאות כמו 2n.	p:nth-of-type(2n) { }
⤢:first-of-type, :last-of-type	האח הראשון או האחרון מאותה תגית.	p:first-of-type { }
⤢:empty	אלמנט בלי ילדים ובלי טקסט.	td:empty { }
⤢:link, :visited	קישורים שטרם ביקרו בהם וקישורים שכבר ביקרו בהם.	a:visited { }
⤢:required, :optional	שדות שסומנו כנדרשים ושדות שנותרו אופציונליים.	input:required { }
⤢:valid, :invalid	שדות שהערך שלהם עובר או נכשל בכללי האימות שלהם.	input:invalid { }
⤢:read-only	שדה שהמשתמש לא יכול לערוך.	input:read-only { }
⤢:target	האלמנט שה-id שלו תואם למקטע ה-URL.	#note:target { }
⤢:default	האופציה שנבחרה מראש או לחצן ברירת המחדל של קבוצה.	input:default { }
⤢:indeterminate	תיבת סימון שהוצבה במצב בלתי-מוחלט על ידי סקריפט.	input:indeterminate { }
⤢:defined	כל אלמנט מובנה, או אלמנט מותאם ברגע שנרשם.	my-widget:defined { }
⤢:lang()	אלמנט בשפה הנתונה.	p:lang(fr) { }
אלמנטים מדומים
⤢::before	צומת תוכן שנוצר לפני האלמנט.	label::before { content: ""; }
⤢::after	צומת תוכן שנוצר אחרי האלמנט.	code::after { content: ";"; }
⤢::first-letter	האות הראשונה של בלוק טקסט.	p::first-letter { }
⤢::placeholder	טקסט ה-placeholder של שדה קלט.	input::placeholder { }
⤢::first-line	השורה הראשונה של בלוק טקסט.	p::first-line { }
⤢::selection	הטקסט שהמשתמש סימן.	::selection { }
⤢::marker	התבליט או המספר של פריט ברשימה.	li::marker { }
⤢::backdrop	האזור שמאחורי אלמנט מסך מלא או דיאלוג.	dialog::backdrop { }
⤢::file-selector-button	כפתור העיון בתוך שדה קובץ.	input::file-selector-button { }
⤢::part()	חלק ב-shadow DOM שהמארח חשף.	my-widget::part(header) { }
סלקטורי מאפיינים
⤢[attr]	אלמנטים שיש להם את המאפיין, בכל ערך.	[required] { }
⤢[attr=val]	המאפיין שווה בדיוק ל-val.	[type="submit"] { }
⤢[attr^=val]	המאפיין מתחיל ב-val.	a[href^="https"] { }
⤢[attr$=val]	המאפיין מסתיים ב-val.	a[href$=".pdf"] { }
⤢[attr*=val]	המאפיין מכיל את val.	a[href*="login"] { }
⤢[attr~=val]	רשימה מופרדת ברווחים שכוללת את val.	[class~="badge"] { }
⤢[attr|=val]	הערך שווה ל-val או מתחיל ב-val ואחריו מקף.	[lang|="en"] { }