Selectorדוגמאתאור
.class.introבוחר את כל האלמנטים עם class="intro" מוגדר בם
.class1.class2.name1.name2בוחר את כל האלמנטים עם name1 ו name2 יחד כ class
.class1 .class2.name1 .name2בוחר את כל האלמנטים עם name2 שהם צחת אלמנט המוגדר כ name1
#id#firstnameבוחר את האלמנט עם id="firstname" מוגדר בו
**בוחר את כל האלמנטים
elementpבוחר את כל האלמנטים עם תגית <p>
element.classp.introבוחר את כל האלמנטים עם תגית <p> ו class="intro"
element,elementdiv, pבוחר את כל האלמנטים עם תגיות <div> ו <p>
element elementdiv pבוחר את כל האלמנטים עם תגית <p> בתוך אלמנטים עם תגית <div>
element>elementdiv > pבוחר את כל האלמנטים עם תגית <p> שאלמנט ההורה עם תגית <div>
element+elementdiv + pבוחר את האלמנט עם תגית <p> שנכנס מיד לאחר אלמנט ההורה עם תגית <div>
element1~element2p ~ ulבוחר כל אלמנט <ul> שלפניו אלמנט <p>
[attribute][target]בוחר את כל האלמנטים עם תכונת יעד
[attribute=value][target=_blank]בוחר את כל האלמנטים עם target="_blank"
[attribute~=value][title~=flower]בוחר את כל האלמנטים עם תכונת כותרת המכילה את המילה "flower"
[attribute|=value][lang|=en]בוחר את כל האלמנטים עם ערך תכונת lang השווה ל-"en" או מתחיל ב-"en-"
[attribute^=value]a[href^="https"]בוחר כל האלמנט <a> שערך התכונה href שלו מתחיל ב-"https"
[attribute$=value]a[href$=".pdf"]בוחר כל האלמנט <a> שערך התכונה href שלו מסתיים ב-".pdf"
[attribute*=value]a[href*="cssguide"]בוחר כל האלמנט <a> שערך התכונה href שלו מכיל את המחרוזת המשנה "cssguide"
:activea:activeבוחר את האלמנט עם הקישור הפעיל
::afterp::afterהוסף משהו אחרי התוכן של כל אלמנט <p>
::beforep::beforeהוסף משהו לפני התוכן של כל אלמנט <p>
:checkedinput:checkedבוחר כל אלמנט <input> מסומן
:defaultinput:defaultבוחר באלמנט ברירת המחדל <input>
:disabledinput:disabledבוחר כל אלמנט <input> מושבת
:emptyp:emptyבוחר כל אלמנט <p> שאין לו בנים (כולל צמתי טקסט)
:enabledinput:enabledבוחר כל אלמנט <input> מופעל
:first-childp:first-childבוחר כל אלמנט <p> שהוא הבן הראשון של ההורה שלו
::first-letterp::first-letterבוחר את האות הראשונה של כל אלמנט <p>
::first-linep::first-lineבוחר את השורה הראשונה של כל רכיב <p>
:first-of-typep:first-of-typeבוחר כל אלמנט <p> שהוא האלמנט הראשון של <p> של האב שלו
:focusinput:focusבוחר את אלמנט הקלט שיש לו מיקוד
:fullscreen:fullscreenבוחר את האלמנט שנמצא במצב מסך מלא
:hovera:hoverבוחר קישורים עם העכבר מעל
:in-rangeinput:in-rangeבוחר אלמנטי input עם ערך בטווח שצוין
:indeterminateinput:indeterminateבוחר אלמנטי input שנמצאים במצב בלתי מוגדר
:invalidinput:invalidבוחר את כל אלמנט ה input עם ערך לא חוקי
:lang(language)p:lang(it)בוחר כל אלמנט <p> עם תכונת lang השווה ל-"it" (איטלקית)
:last-childp:last-childבוחר כל אלמנט <p> שהוא הבן האחרון של ההורה שלו
:last-of-typep:last-of-typeבוחר כל אלמנט <p> שהוא האלמנט האחרון של <p> של האב שלו
:linka:linkבוחר את כל הקישורים שלא ביקרו
::marker::markerבוחר את הסמנים של פריטי רשימה
:not(selector):not(p)בוחר כל רכיב שאינו אלמנט <p>
:nth-child(n)p:nth-child(2)בוחר כל רכיב <p> שהוא הבן השני של ההורה שלו
:nth-last-child(n)p:nth-last-child(2)בוחר כל רכיב <p> שהוא הבן השני של ההורה שלו, בספירה מהבן האחרון
:nth-last-of-type(n)p:nth-last-of-type(2)בוחר כל רכיב <p> שהוא הרכיב השני של <p> של האב שלו, בספירה מהבן האחרון
:nth-of-type(n)p:nth-of-type(2)בוחר כל רכיב <p> שהוא האלמנט השני של האב שלו
:only-of-typep:only-of-typeבוחר כל רכיב <p> שהוא האלמנט <p> היחיד של האב שלו
:only-childp:only-childבוחר כל רכיב <p> שהוא הבן היחיד של ההורה שלו
:optionalinput:optionalבוחר רכיבי קלט ללא תכונה "required".
:out-of-rangeinput:out-of-rangeבוחר רכיבי קלט עם ערך מחוץ לטווח שצוין
::placeholderinput::placeholderבוחר רכיבי קלט עם תכונת "placeholder" שצוינה
:read-onlyinput:read-onlyבוחר רכיבי קלט עם התכונה "readonly" צוינה
:read-writeinput:read-writeבוחר רכיבי קלט עם התכונה "readonly" לא צוינה
:requiredinput:requiredבוחר רכיבי קלט עם התכונה "required" שצוינה
:root:rootבוחר את אלמנט הבסיס של המסמך
::selection::selectionבוחר את החלק של אלמנט שנבחר על ידי משתמש
:target#news:targetבוחר באלמנט #news הפעיל הנוכחי (נלחץ על כתובת URL המכילה את שם העוגן הזה)
:validinput:validבוחר את כל אלמנטים input הקלט עם ערך חוקי
:visiteda:visitedבוחר את כל הקישורים שבהם ביקרת