Перед решением задач изучите теорию к данному уроку.

Задачи для решения

На first-letter

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-letter.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На first-line

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-line.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На selection

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: selection.

Повторите страницу по данному по образцу (выделите текст и повторите цвет и фон выделения):

Вы можете открыть этот пример в отдельной вкладке браузера.

На placeholder

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: placeholder.

Повторите страницу по данному по образцу (поставьте курсор в инпут и попробуйте что-нибудь ввести):

Вы можете открыть этот пример в отдельной вкладке браузера.

На focus

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: focus.

Повторите страницу по данному по образцу (поставьте курсор в инпут и посмотрите как он себя поведет - это и надо повторить):

Вы можете открыть этот пример в отдельной вкладке браузера.

На after, before, content

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: after, before, content.

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст "Начало:", а в конце - ":конец!"):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в начале каждого абзаца средствами CSS вставлен текст, в начале он покрашен в красный цвет, а в конце - в зеленый):

Вы можете открыть этот пример в отдельной вкладке браузера.

На counter-increment

Для решения задач данного блока вам понадобятся следующие CSS свойства, псевдоклассы и псевдоэлементы: counter-increment, counter-reset, after, before.

Повторите страницу по данному по образцу (в начале каждого абзаца вставлена автоматическая нумерация "Абзац №число. "):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (нумерация начинается с 8-ми):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в середине нумерация начинается с начала):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (в середине нумерация имеет разрыв):

Вы можете открыть этот пример в отдельной вкладке браузера.

На nth

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: first-child, last-child, nth-child, nth-last-child, only-child, first-of-type, last-of-type, nth-of-type, nth-last-of-type, only-of-type.

Повторите страницу по данному по образцу (первый li покрашен в красный цвет, а последний - в зеленый):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (третий li покрашен в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (четные li покрашены в зеленый цвет, нечетные - в красный):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (каждая третья li покрашена в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (всегда выбрана предпоследняя li, независимо от их количества):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (выбрана и покрашена в красный цвет только та li, которая является единственной li своего родителя):

Вы можете открыть этот пример в отдельной вкладке браузера.

На checked

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: checked.

Повторите страницу по данному по образцу (красным цветом горит тот тег label, который находится после отмеченного чекбокса или радио):

Вы можете открыть этот пример в отдельной вкладке браузера.

На disabled, enabled

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: disabled-enabled.

Повторите страницу по данному по образцу (незаблокированный инпут светится зеленой тенью, а заблокированный - красной):

Вы можете открыть этот пример в отдельной вкладке браузера.

На empty

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: empty.

Повторите страницу по данному по образцу (пустая li имеет маркер и границу):

Вы можете открыть этот пример в отдельной вкладке браузера.

На not

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: not.

Повторите страницу по данному по образцу (абзац без класса .test светится красным цветом):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (все li, кроме первой, покрашены в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (все li, кроме третьей, покрашены в красный цвет):

Вы можете открыть этот пример в отдельной вкладке браузера.

На lang

Для решения задач данного блока вам понадобятся следующие CSS свойства, псевдоклассы и псевдоэлементы: lang quotes.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

На target

Для решения задач данного блока вам понадобятся следующие псевдоклассы и псевдоэлементы: target.

Повторите страницу по данному по образцу (при переходе по ссылке будет подсвечиваться соответствующий блок):

Вы можете открыть этот пример в отдельной вкладке браузера.