CSS псевдо-класовете се използват за добавяне на специални ефекти към някои селектори.
Синтаксис
Синтаксисът на псевдо-класа:
CSS класовете могат да бъдат използвани с псевдо-класове:
Anchor Псевдо-класове
Връзките могат да бъдат показвани в различни начини в зависимост от състоянието им:
Забележка: hover трябва да се напише след link и visited, за да бъде ефективен класа. А active, трябва да се използва след hover! В предните глави има по-подробно обяснение, защо, как и кога да ги използваме.
Псевдо-класове и CSS класове
Псевдо-класовете могат да се комбинират с CSS класове:
Ако връзката в примера по-горе, е била посетена, ще бъде показана в червено.
CSS – first-child псевдо-класа
first-child псевдо-класа хваща първия дъщерен елемент на даден елемент. Забележка: За да работи :first-child в IE8 и по-ранни версии, а <! DOCTYPE> трябва да бъде деклариран. В следващия пример, селектора съвпада с всеки <p> елемент, който е първото дете на всеки елемент:
Прихвани първия <i> елемент във всички <p> елементи
В следващия пример, селектора хваща първия <i> елемент във всички <p> елементи:
Хвани всички <i> елементи във всеки first-child на <p>
В следващия пример, селектора съвпада всички <i> елементи в <p> елементи, които са на първо дете от друг елемент:
CSS – : Lang Псевдо-класа
: Lang псевдо-класа позволява да се определят специални правила за различните езици.
Забележка: IE8 подкрепя: Lang псевдо-класа, само ако <DOCTYPE> е дефиниран.В примера по-долу, : Lang класа дефинира кавичките за Q елементи с Lang = „не“:
Добавяне на различни стилове към хипервръзки
Този пример показва как да добавите други стилове на хипервръзките.
Използване на: focus
Този пример показва как да използвате: focus псевдо-класа.
Всички CSS Псевдо Класове
| Селектор | Пример | Обяснение |
|---|---|---|
| :active | a:active | Всички активни линкове |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Всеки <p> елемент, който е first child на parent-а си |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Хваща <input> елементите, които имат focus |
| :hover | a:hover | Линкове при поставяне на мишката върху тях |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Хваща всеки <p> елемент със lang атрибут, чиято стойност започва с “it“ |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Хваща всички не-посетени линкове |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no „required“ attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a „readonly“ attribute specified |
| :read-write | input:read-write | Selects <input> elements with no „readonly“ attribute |
| :required | input:required | Selects <input> elements with a „required“ attribute specified |
| :root | root | Selects the document’s root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Всички посетени линкове |