CSS Target: повышение точности выборки элементов на веб-странице

CSS target - это псевдокласс, который позволяет стилизовать элементы на основе их текущего состояния или положения в URL-адресе. Он активируется, когда в URL-адресе страницы есть фрагмент идентифицирующий целевой элемент. Например, при переходе по следующему URL-адресу веб-страницы:

http://example.com/#section-1

Если в CSS использовать псевдокласс :target селектор:

#section-1:target {

background-color: yellow;

}

то целевой элемент с id "section-1" будет иметь желтый фон.

Этот псевдокласс часто используется для создания навигационных меню с якорными ссылками. Когда пользователь нажимает на ссылку с якорем, содержащем id элемента на веб-странице, этот элемент становится целью (:target), и в CSS можно задать стили, чтобы подчеркнуть активный пункт меню.

Пример кода для создания навигационного меню с использованием псевдокласса :target:

HTML:

CSS:

nav ul li a:target {

color: red;

}

При нажатии на ссылку с якорем "#section-1", цвет текста ссылки будет красным.

Таким образом, псевдокласс :target позволяет стилизовать элементы на основе их текущего состояния в URL-адресе и широко используется для создания интерактивных навигационных меню и других элементов веб-страниц.