CSS Սելեքթորներ

Այստեղ պատկերված են CSS սելեքթորներն իրենց օրինակներով, որոնց միջոցով ընտրվում են HTML տարրերը, CSS ոճային աղյուսակում արտաքին տեսքի հետ կապված կանոններ գրելու նպատակով:

- նոր է CSS3-ում

Սելեքթոր Օրինակ Օրինակի բնութագիր
.class .intro Ընտրում է այն տարրերը, որոնց class="intro":
#id #firstname Ընտրում է այն տարրերը, որոնց id="firstname":
* * Ընտրում է բոլոր տարրերը:
տարր p Ընտրում է բոլոր <p> տարրերը:
տարր, տարր div, p Ընտրում է բոլոր <div> և <p> տարրերը:
տարր տարր div p Ընտրում է բոլոր <p> տարրերը <div> տարրերի ներսում:
տարր > տարր div > p Ընտրում է այն <p> տարրերը, որոնց ծնողը <div> տարրն է:
տարր + տարր div + p Ընտրում է այն <p> տարրերը, որոնք տեղադրված են անմիջապես <div> տարրերից հետո:
տարր ~ տարր p ~ ul Ընտրում է այն <ul> տարրերը, որոնք հաջորդում են <p> տարրին:
[ատրիբուտ] [target] Ընտրում է բոլոր target ատրիբուտով տարրերը:
[ատրիբուտ = value] [target=_blank] Ընտրում է այն տարրերը, որոնց target="_blank":
[ատրիբուտ ~= value] [title~=flower] Ընտրում է այն տարրերը, որոնց title ատրիբուտը պարունակում է flower բառը:
[ատրիբուտ |= value] [lang|=en] Ընտրում է այն տարրերը, որոնց lang ատրիբուտի արժեքը սկսում է en-ով:
[ատրիբուտ ^= value] a[href^="https"] Ընտրում է այն <a> տարրերը, որոնց href ատրիբուտի արժեքը սկսում է https-ով:
[ատրիբուտ $= value] a[href$=".pdf"] Ընտրում է այն <a> տարրերը, որոնց href ատրիբուտի արժեքը ավարտվում է .pdf-ով:
[ատրիբուտ *= value] a[href*="weber"] Ընտրում է այն <a> տարրերը, որոնց href ատրիբուտի արժեքը պարունակում է weber ենթատող:
:active a:active Ընտրում է ակտիվ հղումը:
::after p::after Տեղադրեք պարունակություն յուրաքանչյուր <p> տարրի պարունակությունից հետո:
::before p::before Տեղադրեք պարունակություն յուրաքանչյուր <p> տարրի պարունակությունից առաջ:
:checked input:checked Ընտրում է բոլոր նշված <input> տարրերը:
:disabled input:disabled Ընտրում է բոլոր անաշխատունակ <input> տարրերը:
:empty p:empty Ընտրում է այն <p> տարրերը, որոնք չունեն երեխա (տեքստային հանգույցները ներառված):
:enabled input:enabled Ընտրում է բոլոր աշխատունակ <input> տարրերը:
:first-child p:first-child Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի առաջին երեխան է:
::first-letter p::first-letter Ընտրում է բոլոր <p> տարրերի առաջին տառը:
::first-line p::first-line Ընտրում է բոլոր <p> տարրերի առաջին տողը:
:first-of-type p:first-of-type Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի առաջին <p> տարրն է:
:focus input:focus Ընտրում է այն <input> տարրը, որն ունի ֆոկուս:
:hover a:hover Ընտրում է այն հղումները, որոնց վրա կգտնվի մկնիկի սլաքը:
:in-range input:in-range Ընտրում է այն <input> տարրերը, որոնց արժեքը հատկանշված միջակայքում է:
:invalid input:invalid Ընտրում է այն <input> տարրերը, որոնց արժեքը անվավեր է:
:lang(լեզու) p:lang(hy) Ընտրում է այն <p> տարրերը, որոնց lang="hy" (Հայերեն):
:last-child p:last-child Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի վերջին երեխան է:
:last-of-type p:last-of-type Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի վերջին <p> տարրն է:
:link a:link Ընտրում է բոլոր չայցելած հղումները:
:not(սելեքթոր) :not(p) Ընտրում է այն տարրերը, որոնք <p> տարր չեն:
:nth-child(n) p:nth-child(2) Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի 2-րդ երեխան է:
:nth-last-child(n) p:nth-last-child(2) Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի 2-րդ երեխան է, հաշված վերջին երեխայից:
:nth-last-of-type(n) p:nth-last-of-type(2) Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի 2-րդ <p> տարրն է, հաշված վերջին տարրից:
:nth-of-type(n) p:nth-of-type(2) Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի 2-րդ <p> տարրն է:
:only-of-type p:only-of-type Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի միակ <p> տարրն է:
:only-child p:only-child Ընտրում է յուրաքանչյուր <p> տարր, որն իր ծնողի միակ երեխան է:
:optional input:optional Ընտրում է այն <input> տարրերը, որոնք չունեն required ատրիբուտ:
:out-of-range input:out-of-range Ընտրում է այն <input> տարրերը, որոնց արժեքը հատկանշված միջակայքից դուրս է:
:read-only input:read-only Ընտրում է այն <input> տարրերը, որոնք ունեն readonly ատրիբուտ:
:read-write input:read-write Ընտրում է այն <input> տարրերը, որոնք չունեն readonly ատրիբուտ:
:required input:required Ընտրում է այն <input> տարրերը, որոնք ունեն required ատրիբուտ:
:root :root Ընտրում է փաստաթղթի արմատային տարրը:
::selection ::selection Ընտրում է տարրի այն հատվածը, որը նշված է օգտվողի կողմից:
:target #news:target Ընտրում է ընթացիկ ակտիվ այն տարրը, որի id="news" (այդ անվանումը պարունակող URL-ի վրա սեղմած):
:valid input:valid Ընտրում է այն <input> տարրերը, որոնք ունեն վավեր արժեք:
:visited a:visited Ընտրում է բոլոր այցելած հղումները: