Псевдоклассы CSS
Задание:
Показать использование псевдоклассов CSS.
Динамические псевдоклассы:
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Динамические псевдоклассы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
</tr>
</table>
<form>
<input type="text">
</form>
</body>
</html>
Файл styles.css:
table { border-collapse: collapse; }
th, td { padding: 0 3px; border: 1px solid #000000; text-align: center; }
tr:hover { background-color: #deebec; }
tr:hover > th { background-color: #ff0000; }
form { margin-top: 20px; }
input[type=text] { outline: none; }
input[type=text] { border: 1px solid #cccccc; }
input[type=text]:focus { border: 1px solid #ff0000; }
Результат:
Результат можно посмотреть
здесь.
Целевой псевдокласс:
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Целевой псевдокласс</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li><a href="#t1">Статья 1</a></li>
<li><a href="#t2">Статья 2</a></li>
<li><a href="#t3">Статья 3</a></li>
<li><a href="#t4">Статья 4</a></li>
</ul>
<p><b id="t1">Статья 1</b> – текст первой статьи.</p>
<p><b id="t2">Статья 2</b> – текст второй статьи.</p>
<p><b id="t3">Статья 3</b> – текст третьей статьи.</p>
<p><b id="t4">Статья 4</b> – текст четвертой статьи.</p>
</body>
</html>
Файл styles.css:
b:target { color: #ff0000; }
Результат:
Результат можно посмотреть
здесь.
Псевдоклассы состояний:
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Псевдоклассы состояний</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Какой напиток вы предпочитаете?</p>
<label><input type="checkbox" name="a1"><span>Херес</span></label><br>
<label><input type="checkbox" name="a2"><span>Портвейн</span></label><br>
<label><input type="checkbox" name="a3"><span>Мадера</span></label>
</body>
</html>
Файл styles.css:
input[type="checkbox"] + span { position: relative; top: -1px; left: 6px; }
input[type="checkbox"]:checked + span { color: #ff0000; }
Результат:
Результат можно посмотреть
здесь.
Структурные псевдоклассы
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Структурные псевдоклассы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Дежурный</th>
<th>ПН</th>
<th>ВТ</th>
<th>СР</th>
<th>ЧТ</th>
<th>ПТ</th>
<th>СБ</th>
<th>ВС</th>
</tr>
<tr>
<td>Корольков</td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Кукушкина</td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Чижиков</td>
<td> </td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Светлова</td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Смирнов</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Гусев</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td>Сыроежкин</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
Файл styles.css:
table { border-spacing: 0; border-collapse: collapse; }
th, td { border: 1px solid #000000; padding: 10px 10px; width: 26px; }
td:empty { background-color: #a0a0a0; }
Результат:
Результат можно посмотреть
здесь.
Псевдокласс отрицания
Файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Псевдокласс отрицания</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Дежурный</th>
<th>ПН</th>
<th>ВТ</th>
<th>СР</th>
<th>ЧТ</th>
<th>ПТ</th>
<th>СБ</th>
<th>ВС</th>
</tr>
<tr>
<td>Корольков</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Кукушкина</td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Чижиков</td>
<td></td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Светлова</td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Смирнов</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td>Гусев</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
<tr>
<td>Сыроежкин</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
Файл styles.css:
table { border-spacing: 0; border-collapse: collapse; }
th, td { border: 1px solid #000000; padding: 10px 10px; width: 26px; }
td:not(:first-child):not(:empty) { background-color: #a0a0a0; }
Результат:
Результат можно посмотреть
здесь.