Селекторы CSS по id

Помимо селекторов по названию тега и названию класса есть ещё селекторы по уникальному атрибуту id. В отличии от классов id может иметь только одно значение. Нельзя написать несколько значений через пробел по аналогии с клсами. Значение атрибута id должно быть уникальным на всю страницу. В противном случае на некоторых браузерах селектор может не работать.

Рассмотрим пример использования селектора по id элемента. Представим что есть любой тег с атрибутом id:

<span id="test">Тише, мыши.</span> Кот на крыше.

Обратиться к такому элементу по id можно по тому же принципу, что и при обращении к классу, но вместо точки перед значением атрибута необходимо поставить решётку «#«.

#test {
   color: red;
}

В браузере получим такой результат:

Тише, мыши. Кот на крыше.

Как и в случае с классами можно обращаться к вложенным элементам. К примеру, для такой вложенности тегов:

<span class="test1">
   Тише, мыши.
   <span id="test2">
      Кот на крыше.
   </span> 
</span> 

CSS код селектора будет выглядеть так::

.test1 #test2 {
   color: red;
}