Ідентифікатор (ID селектор) визначає унікальне ім'я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти, що дозволяє керувати стилем елемента динамічно.
Синтаксис ідентифікатора наступний:
Тег#Імя_ідентифікатора{властивість1:значення; властивість2:значення;... }
Як і для класів, тег може бути відсутнім. Тоді ідентифікатор може застосовуватися для довільного тега.
На відміну від класу, ім’я ідентифікатора повинне бути унікальним в межах документа.
Звернення до ідентифікатора відбувається аналогічно класам, але в якості ключового слова у тега використовується параметр id, значенням якого виступає ім'я ідентифікатора. Символ # при цьому вже не вказується.
Використання ідентифікатора дає можливість змінювати деякі параметри елемента за допомогою скриптів. Наприлад, наступний код робить видимим текст комірки таблиці при наведенні мишки на кнопку і невидимим у протилежному випадку:
<head>
<title>Ідентифікатори</title>
<style type ="text/css">
#descr {position: relative; visibility: hidden;}
</style>
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility="hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility="visible";
}
</script>
</head>
<body>
<table width="90%" cellpadding="4" align="center">
<tr>
<td width="20%" align="center">
<a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">
<img src ="image\button.jpg" alt="Кнопка"></a></td>
<td>
<div id="descr">Приклад використання ID селектора.</div>
</td>
</tr>
</table>
</body>
Результат даного прикладу показано нижче. При наведенні курсору миші на зображення демонструється прихований до цього часу текст, який знову ховається при покиданні курсором кнопки. Зміна параметрів стилю елемента відбувається через звернення до нього по імені ідентифікатора.
