В 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 aDOM комбиниращ потомък. Всички 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.