רשימת סלקטורים שטוב לדעת ב-CSS:
*
בוחר הכל (כל התגיות) – לא להשתמש בו, אלא אם הוא בא עם סלקטור לפניו
.my-class *{}
div > p
בוחר את כל תגיות ה-P שה"אבא" שלהם DIV
<div> <p></p> </div>
div + p
בוחר את כל תגיות ה-P שמגיעות מיד אחרי DIV
<div></div> <p></p> <div></div> <p></p>
div ~ p
בוחר את כל תגיות ה-P שיגיעו אחרי ה-DIV
<div></div> <p></p> <p></p> <p></p> <p></p>
[aria-label]
בחירה על פי מאפיין שיש לתגית
<div aria-label="hi"></div>
[aria-label~="am"]
בחירה של כל התגיות עם המאפיינים שמכילים את המילה בתוך הגרשיים
<div aria-label="hi, i am attr"></div>
[aria-label|="hi"]
בחירה של כל התגיות שיש להם מאפיין שמתחיל עם המילה בתוך הגרשיים עד לסימן מינוס או רק את המילה בתוך הגרשיים, במידה שיש את המילה ואחרי רווח ועוד מילה, הסלקטור לא יתפוס
<div aria-label="hi-you, i am attr"></div>
[aria-label^="hi"]
בחירה של כל התגיות שיש להם מאפיין שמתחיל עם המילה בתוך הגרשיים
<div aria-label="hi, i am attr"></div>
[aria-label$="attr"]
בחירה של התגיות עם המאפיין שהערך שלו מסתיים במה שכתוב בגרשיים
<div aria-label="hi, i am attr"></div>
[aria-label*="att"]
בחירה של כל התגיות עם המאפיינים שמכילים את המילה בתוך הגרשיים גם אם היא חלק ממילה
<div aria-label="hi, i am attr"></div>
הינה סיכום של כל הסלקטורים הנ"ל:
div > p {} div + p {} div ~ p {} [aria-label] {} [aria-label~="am"]{} [aria-label|="hi"] {} [aria-label^="hi"]{} [aria-label$="attr"] {} [aria-label*="att"]{}