CSS селектори

В CSS селекторите са шаблони, използвани за избор на елементите, чрез които искате те да оформят нещо.

Селектор Пример Примерно описание
.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> елементите
елемент1~елемент2 p ~ ul Избира всеки <ul> елемент който се предхожда от <p> елемента
[attribute] [target] Избира всички елементи с целеви атрибут
[attribute=value] [target=_blank] Избира всички елементи с цел = „_ празно
[attribute~=value] [title~=flower] Избира всички елементи с атрибут на заглавието, съдържащ думата „цвете“
[attribute|=value] [lang|=en] Избира всички елементи с стойност на атрибута lang, започваща с „en“
[attribute^=value] a[href^=“https“] Избира всеки <a> елемент, чиято стойност на атрибута href започва с „https“
[attribute$=value] a[href$=“.pdf“] Избира всеки <a> елемент, чиято стойност на атрибута href завършва с „.pdf“
[attribute*=value] a[href*=“w3schools“] Избира всеки <a> елемент, чиято стойност на атрибута href съдържа подниз „w3schools“
: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 Избира входящия елемент, който е с фокус
:hover a:hover Избира връзки с мишката
:in-range input:in-range Избира входни елементи със стойност в определен диапазон
:invalid input:invalid Избира всички входни елементи с невалидна стойност
:lang(language) p:lang(it) Избира всеки елемент <p> с атрибута lang, равен на „it“ (италиански)
:last-child p:last-child Избира всеки <p> елемент който е последното дете на неговия родител
:last-of-type p:last-of-type Избира всеки елемент <p> който е последният елемент <p> неговия родител
:link a:link Избира всички непосетени връзки
: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> елемент който е вторият елемент <p> на неговия родител
:only-of-type p:only-of-type Избира всеки <p> елемент единственият елемент <p> на неговия родител
:only-child p:only-child Избира всеки <p> елемент Избира всеки елемент <p>, който е единственото дете на неговия родител
:optional input:optional Избира входни елементи без атрибут „задължително“
:out-of-range input:out-of-range Избира входни елементи със стойност извън определен диапазон
:read-only input:read-only Избира входни елементи с посочения атрибут „readonly“
:read-write input:read-write Избира входни елементи с атрибут „readonly“ Неопределено
:required input:required Избира входните елементи с посочения атрибут „required“
:root :root Избира коренния елемент на документ
::selection ::selection Избира част от елемент, който е избран от потребител
:target #news:target Избира текущия активен елемент #news (кликвайки върху URL адреса, съдържащ това име за котва)
:valid input:valid Избира всички input елементи с валидна стойност
:visited a:visited Избира всички Избира всички посетени връзки