Еще один способ, как можно выбрать элемент на веб-странице для применения к нему стилей CSS - это использовать так называемый селектор id или по идентификатору.
Как это работает?
Предположим у нас на веб-странице есть какой-ли элемент, у которого есть атрибут id со значением, предположим, test.
<ul> <li id="test">Элемент 1</li> <li>Элемент 2</li> </ul>
Каким образом мы можем применить стили CSS только к тому элементу, который имеет атрибут id со значением test?
Для этого в CSS используется специальный символ решетка "#", далее указывается то значение атрибута id, к которому нужно применить стили и далее указываются стили, которые должны быть применены к этому элементу.
#test {
color:blue;
}Особенность атрибута id в том, что мы не можем применять несколько атрибутов id с одним и тем же значением в пределах одной страницы. Атрибут id - это уникальный идентификатор. Для того, чтобы не возникало каких-либо ошибок, у нас в пределах одной веб-страницы не должно быть двух и более элементов с одинаковым значением атрибута id.
Для стилей CSS одинаковые значения атрибутов id особого значения может не иметь, но для Javascript скриптов - это может критично и программа может завершиться с ошибкой.
Таким образом вы можете выбирать элементы по их идентификатору и применять к ним стили CSS, т.е. те стили оформления, которые вы хотели бы у них видеть.
Посмотрите следующее видео, чтобы увидеть, что будет если в пределах одной веб-страницы использовать несколько элементов с одинаковым значением атрибута id.