CSS. Селектор по атрибуту id.

Еще один способ, как можно выбрать элемент на веб-странице для применения к нему стилей 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.