BootstrapTema

Тестируем CSS псевдоклассы

Этот онлайн инструмент предназначен для изучения, тестирования и экспериментов с псевдоклассами CSS, которые добавляются к селекторам и позволяют выбирать элементы в определённом состоянии или позиции.

HTML:

CSS:

JavaScript:

Псевдоклассы:

Как использовать инструмент

Инструмент прост в использовании и состоит из нескольких основных частей:

1. HTML-редактор: В этом разделе вы можете написать HTML-код, который будет отображаться в результате. Например, вы можете создать список, форму или любой другой элемент.
2. CSS-редактор: Здесь вы можете добавить CSS-стили, включая псевдоклассы. Например, вы можете изменить цвет текста при наведении курсора или выделить каждый второй элемент списка.
3. JavaScript-редактор: В этом разделе можно добавить JavaScript-код для добавления интерактивности. Например, вы можете добавить обработчик событий для кнопки.
4. Псевдоклассы: В этом разделе вы можете выбрать псевдокласс и указать, к каким элементам он должен применяться. Например, вы можете выбрать все нечётные элементы списка или ссылки при наведении.
5. Результат: В этом разделе отображается результат выполнения вашего кода. Вы можете сразу видеть, как изменения в HTML, CSS и JavaScript влияют на отображение страницы.

Описание псевдоклассов CSS

Приведены примеры использования различных псевдоклассов CSS.

li:nth-child(2n) {
 background-color: yellow;
}

li:nth-last-child(2) {
 background-color: lightblue;
}

p:nth-of-type(3) {
 color: red;
}

p:nth-last-of-type(1) {
 font-weight: bold;
}

button:active {
 background-color: green;
}

a:any-link {
 color: purple;
}

input:checked + label {
 color: blue;
}

input:default {
 border: 2px solid green;
}

custom-element:defined {
 display: block;
}

p:dir(rtl) {
 text-align: right;
}

input:disabled {
 background-color: #eee;
}

div:empty {
 display: none;
}

input:enabled {
 border: 1px solid green;
}

@page :first {
 margin: 2cm;
}

li:first-child {
 font-weight: bold;
}

p:first-of-type {
 color: blue;
}

div:fullscreen {
 background-color: black;
}

input:focus {
 border-color: blue;
}

button:hover {
 background-color: yellow;
}

input:indeterminate {
 opacity: 0.5;
}

input:in-range {
 border-color: green;
}

input:invalid {
 border-color: red;
}

p:lang(en) {
 font-style: italic;
}

li:last-child {
 color: red;
}

p:last-of-type {
 font-weight: bold;
}

@page :left {
 margin-left: 2cm;
}

a:link {
 color: blue;
}

li:not(.special) {
 color: gray;
}

li:only-child {
 background-color: lightgreen;
}

p:only-of-type {
 font-size: 20px;
}

input:optional {
 border-color: gray;
}

input:out-of-range {
 border-color: red;
}

input:read-only {
 background-color: #f5f5f5;
}

input:read-write {
 background-color: white;
}

input:required {
 border-color: red;
}

@page :right {
 margin-right: 2cm;
}

:scope {
 background-color: yellow;
}

:target {
 background-color: lightyellow;
}

input:valid {
 border-color: green;
}

a:visited {
 color: purple;
}

Ещё инструменты