Темная тема
Псевдоклассы
:hover
:hover- при наведении.
Например. Изменим файл index.html:
html
<body>
<button class="btn">Нажми меня</button>
</body>Изменим файл styles.css:
css
.btn:hover {
background: orange;
cursor: pointer;
}:focus
:focus- при фокусе (наведении мыши).
Например. Изменим файл index.html:
html
<body>
<input type="text" placeholder="Введите текст" />
</body>Изменим файл styles.css:
css
input:focus {
border: 2px solid blue;
outline: none;
}:active
:active- при нажатии.
Например. Изменим файл index.html:
html
<body>
<button class="btn">Нажми меня</button>
</body>Изменим файл styles.css:
css
.btn:active {
background: red;
}:disabled
:disabled- для недоступных элементов.
Например. Изменим файл index.html:
html
<body>
<button disabled>Недоступная кнопка</button>
</body>Изменим файл styles.css:
css
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}:first-child
:first-child- первый дочерний элемент.
Например. Изменим файл index.html:
html
<body>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</body>Изменим файл styles.css:
css
li:first-child {
font-weight: bold;
}:nth-child(n)
:nth-child(n)- дочерний элемент за номеромn.
Например. Изменим файл index.html:
html
<body>
<table>
<tr>
<td>Строка 1</td>
</tr>
<tr>
<td>Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
</tr>
</table>
</body>Изменим файл styles.css:
css
tr:nth-child(2) {
background: lightgray;
}