В CSS селекторите са модели, използвани за избор на DOM елементи.
Ето пример за използване на селектори. В следния код a
и h1
са селектори:
a { color: black; } h1 { font-size 24px; }
Мамят на често срещани селектори
head
избира елемента с head
тага
.red
избира всички елементи с клас "червен"
#nav
избира елементите с идентификатора 'nav'
div.row
избира всички елементи с div
маркера и класа 'row'
["]
избира всички елементи с aria-hidden
атрибута със стойност „true“
- Избор на заместващ символ. Избира всички DOM елементи. Вижте по-долу за използването му с други селектори
Можем да комбинираме селектори по интересни начини
Няколко примера:
li a
DOM комбиниращ потомък. Всички a
тагове, които са дъщерни на li
етикети
div.row *
избира всички елементи, които са низходящи (или дъщерни) на елементите с div
клас и 'row'
li > a
Комбинатор на разлики. Изберете директни потомци, вместо всички потомци като селекторите на потомци
li + a
Съседният комбинатор. Той избира елемента, който е непосредствено предшестван от предишния елемент. В този случай само първата a
след всяка li
.
li, a
Избира всички a
елементи и всички li
елементи.
li ~ a
Комбинаторът на братя и сестри. Избира a
елемент, следващ li
елемент.
Псевдоселектори или псевдоструктурни класове
Те също са полезни за избор на структурни елементи от DOM.
Ето някои от тях:
:first-child
Насочете първия елемент непосредствено вътре (или дъщеря на) друг елемент
:last-child
Насочете се към последния елемент непосредствено вътре (или дъщеря на) друг елемент
:nth-child()
Насочете n-ия елемент непосредствено вътре (или дъщеря на) друг елемент. Признава числа, even
, odd
, или формули
a:not(.name)
Избира всички a
елементи, които не са от .name
класа
::after
Позволява вмъкване на съдържание на страница от CSS, вместо от HTML. Въпреки че всъщност крайният резултат не е в DOM, той се появява на страницата сякаш е. Това съдържание се зарежда след HTML елементи.
::before
Позволява вмъкване на съдържание на страница от CSS, вместо от HTML. Въпреки че всъщност крайният резултат не е в DOM, той се появява на страницата сякаш е. Това съдържание се зарежда преди HTML елементи.
Можем да използваме псевдокласове, за да определим специално състояние на елемент от DOM. Но те сами не сочат към елемент.
Няколко примера:
:hover
избира елемент, който се навежда от показалеца на мишката
:focus
избира елемент, който получава фокус от клавиатурата или програмно
:active
избира елемент, щракнат от показалеца на мишката
:link
избира всички връзки, които все още не са щракнати
:visited
избира връзка, която вече е щракната
Повече информация за селектора за n-дете
В nth-child
селектора е CSS псевдо-класа, като модел, чрез който да отговаря на един или повече елементи, отнасящи се до тяхната позиция сред братя и сестри.
Синтаксис
a:nth-child(pattern) { /* Css goes here */ }
модел
Моделите, приети от, nth-child
могат да бъдат под формата на ключови думи или уравнение на формата An + B.
Ключови думи
Странно
Odd връща всички нечетни елементи от даден тип.
a:nth-childe(odd) { /* CSS goes here */ }
Дори
Дори връща всички четни елементи от даден тип.
a:nth-childe(even) { /* CSS goes here */ }
An + B
Връща всички елементи, съответстващи на уравнението An + B за всяка положителна цяла стойност на n (в допълнение към 0).
Например следното ще съответства на всеки 3-ти котва елемент:
a:nth-childe(3n) { /* CSS goes here */ }
Игри
CSS Diner е уеб игра, която преподава почти всичко, което трябва да знаете за комбинирането на селектори.
Допълнителни препратки
Има много повече селектори на CSS! Научете за тях на CodeTuts, CSS-tricks.com или в Mozilla Developer Network.