Псевдокласове
Псевдокласовете са ключови думи, добавени към селектор, описващи специфично състояние на указаните елементи. Примерно, можем да използваме :hover
(en-US) за да сменим фона на елемент, когато потребителят мине с мишката върху него.
div:hover {
background-color: #F89B4D;
}
Чрез псевдокласовете можете да определяте външния вид на елемент, не само според местоположението му в дървото на документа (пр. :first-child
), но също и според външни фактори, каквито са историята на разглеждането (пр. :visited
(en-US)), състоянието на елемента (пр. :checked
(en-US) при някои елементи за формуляри), мястото на мишката (пр. :hover
(en-US) позволява да се установи дали мишката се намира върху елемента)...
Бележка: За разлика от псевдокласовете, псевдоелементите (en-US) служат за стилизиране на конкретна част от html елемент.
Правопис
selector:pseudo-class { свойство: стойност; }
Както при обикновените класове, можете да изредите заедно колкото искате псевдокласове в един указател за избор на елементи (селектор).
Индекс на стандартни псевдокласове:
:active
(en-US):any
(en-US):checked
(en-US):default
(en-US):dir()
(en-US):disabled
(en-US):empty
(en-US):enabled
(en-US):first
(en-US):first-child
:first-of-type
(en-US):fullscreen
(en-US):focus
(en-US):hover
(en-US):indeterminate
(en-US):in-range
(en-US):invalid
(en-US):lang()
(en-US):last-child
(en-US):last-of-type
(en-US):left
(en-US):link
(en-US):not()
(en-US):nth-child()
:nth-last-child()
(en-US):nth-last-of-type()
(en-US):nth-of-type()
(en-US):only-child
(en-US):only-of-type
(en-US):optional
(en-US):out-of-range
(en-US):read-only
(en-US):read-write
(en-US):required
(en-US):right
(en-US):root
(en-US):scope
(en-US):target
(en-US):valid
(en-US):visited
(en-US)
Спецификации
Specification | Status | Comment |
---|---|---|
Fullscreen API | Living Standard | Дефинира :fullscreen . |
HTML Living Standard | Living Standard | Без промяна спрямо HTML5. |
Selectors Level 4 | Working Draft | Дефинира :any-link , :local-link , :scope , :active-drop-target , :valid-drop-target , :invalid-drop-target , :current , :past , :future , :placeholder-shown , :user-error , :blank , :nth-match() , :nth-last-match() , :nth-column() , :nth-last-column() и :matches() .Без значителни промени спрямо псевдокласовете дефинирани в Selectors Level 3 и HTML5 (семантичното значение не е взето предвид). |
HTML5 | Recommendation | Дефинира семантично значение в контекста на HTML за :link , :visited , :active , :enabled , :disabled , :checked и :indeterminate .Дефинира :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only , :read-write и :dir() . |
CSS Basic User Interface Module Level 3 | Recommendation | Дефинира :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only и :read-write , но без да ги обвързва със семантично значение. |
Selectors Level 3 | Recommendation | Дефинира :target , :root , :nth-child() , :nth-last-of-child() , :nth-of-type() , :nth-last-of-type() , :last-child , :first-of-type , :last-of-type , :only-child , :only-of-type , :empty и :not() .Дефинира синтаксиса на :enabled , :disabled , :checked и :indeterminate , но без да ги обвързва със семантично значение.Без значителни промени в псевдокласовете дефинирани в CSS Level 2 (Revision 1). |
CSS Level 2 (Revision 1) | Recommendation | Дефинира :lang() , :first-child , :hover и :focus .Без значителни промени в псевдокласовете дефинирани в CSS Level 1. |
CSS Level 1 | Recommendation | Дефинира :link , :visited и :active , но без да ги обвързва със семантично значение. |