Псевдоклассы
Псевдокласс :active
Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.
Синтаксис
Селектор:active { ... }
<style>
a:link {
color: #0000d0; /* Цвет ссылок */
}
a:visited {
color: #900060; /* Цвет посещённых ссылок */
}
a:active {
color: #f00; /* Цвет активной ссылки */
}
</style>
В данном примере задаётся цвет обычных, посещённых и активных ссылок.
Псевдокласс :checked
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.
Синтаксис
Селектор:checked { ... }
Примеры использования
input[type="radio"]:checked { ... }
Стиль применяется только ко включенным переключателям.
input[type="checkbox"]:checked { ... }
Стиль применяется только к помеченным флажкам (чекбоксам).
option:checked { ... }
Стиль применяется только к выбранным элементам списка.
<style>
input:checked + span {
background: #fc0;
}
</style>
В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 1.
Псевдокласс :default
Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через :default.
Синтаксис
Селектор:default { ... }
<title>default</title>
<style>
:default {
background-color: lime;
}
</style>
В данном примере кнопка Submit, заданная по умолчанию, имеет другой цвет.
Псевдокласс :disabled
Псевдокласс :disabled используется для применения стиля к заблокированным элементам форм. Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст.
Синтаксис
Селектор:disabled { ... }
<style>
textarea:disabled {
background: url(image/dline.png);
border: 1px solid #666;
padding: 5px;
}
</style>
В данном примере изменен стиль заблокированного текстового поля. Результат примера показан на рис. 3.
Псевдокласс :empty
Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста или пробелов. К примеру, <p></p> является пустым элементом, а <p> </p>, <p> </p> или <p>эге</p> уже нет.
Синтаксис
Селектор:empty { ... }
<style>
span:empty {
background: red;
padding: 3px;
margin-left: 7px;
display: inline-block;
}
</style>
Псевдокласс :enabled
Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.
Синтаксис
Селектор:enabled { ... }
<style>
input:enabled { background: red; }
</style>
Псевдокласс :first-child
Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
Синтаксис
Селектор:first-child { ... }
<style>
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
Результат
примера показан на рис. 1. В данном
примере псевдокласс :first-child добавляется
к селектору b и
устанавливает для него красный цвет
текста. Хотя контейнер <b> встречается
в первом абзаце три раза, красным цветом
будет выделено лишь первое упоминание,
т. е. текст «Lorem ipsum». В остальных
случаях содержимое контейнера <b> отображается
чёрным цветом. Со следующим абзацем всё
начинается снова, поскольку родительский
элемент поменялся. Поэтому фраза «Ut
wisis enim» также будет выделена красным
цветом.
<style>
.links {
background: #F6967D; /* Цвет фона */
}
.links a {
color: #FFFDEB; /* Цвет ссылок */
display: inline-block; /* Строчно-блочный элемент */
border-left: 1px solid #B62025; /* Параметры рамки слева */
padding: 5px 10px; /* Поля вокруг ссылок */
}
.links a:first-child {
border-left: none; /* Убираем первую линию слева */
}
</style>
