Селектор id CSS
Селектор уникального идентификатора (id) в языке CSS
Селектор id
Схема CSS-кода выглядит следующим образом:
селектор {
CSS-свойство: значение;
CSS-свойство: значение;
... и т.д.
}
В селекторе id, в качестве селектора, выступает имя уникального идентификатора:
#имяУникальногоИдентификатора {
CSS-свойство: значение;
... и т.д.
}
Обратите внимание на то, что перед именем уникального идентификатора ставится решётка #
Селектор id — это выборка элементов, по значению глобального атрибута id=" "
Пример внедрения глобального атрибута id=" " в HTML-тег:
<тег id="имяУникальногоИдентификатора"> </тег>
имяУникальногоИдентификатора — это значение глобального атрибута id=" "
В качестве имени уникального идентификатора, может выступать любое слово состоящее из букв английского алфавита, цифр, знака дефиса - или знака подчёркивания _. Начинаться имя уникального идентификатора должно только с буквы.
Допустим, у нас есть HTML-документ, содержащий статью о снежном барсе, статья содержит два абзаца:
<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> </head> <body> <h1>Снежный барс</h1> <p> Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.</p> <p> Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.</p> </body> </html>
Страница в браузере, будет выглядеть следующим образом.
Нам нужно сделать так, чтобы первый абзац был синего цвета, а второй абзац был зелёного цвета.
Для этого, надо в тег первого абзаца внедрить атрибут id=" " со значением abzac, а в тег второго абзаца внедрить атрибут id=" " со значением abzac2
В CSS-коде, вместо имён тегов, нужно вставить имена уникальных идентификаторов и перед их именем поставить решётку #
<style>
#abzaс {color: blue;}
#abzaс2 {color: green;}
</style>
В итоге, получаем такой HTML-документ:
<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> <style> #abzac {color: blue;} #abzac2 {color: green;} </style> </head> <body> <h1>Снежный барс</h1> <p id="abzaс"> Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.</p> <p id="abzaс2"> Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.</p> </body> </html>
Страница в браузере, будет выглядеть следующим образом.
PS: Символ решётки также еще называют хэшем, а решётку + слово — хэштэгом.
Читать далее: В чем разница между селекторами class и id?