Приветствую всех на третей части курса HTML с нуля. В прошлой части мы изучили теги и атрибуты HTML. Сегодня мы поговорим про такие атрибуты как id и class, так же их называют селекторы. Название «cелекторы» пошло от английского слова «SELECT», что означает «выбирать». Они служат для уникальной идентификации элемента или группы элементов и используются в javascript и css для обращения к элементу по идентификатору. Об этом поговорим позже, а сейчас рассмотрим на примере назначение данных атрибутов:
Синтаксис назначения id или class достаточно простой. Указывается через равно в кавычках любое имя, которое может содержать: буквы английского алфавита, цифры и знак подчеркивания «_». Через пробел, можно назначить назначить несколько имен class или id:
Теперь наш тег p имеет два имени класса, и мы можем равносильно обратиться к нему по любому имени (text1 или text2).
id и class — атрибуты с одинаковым назначением, но отличаются тем что id должен быть уникальным для каждого элемента, а одно и то же имя класса может быть присвоено нескольким элементам. Например нельзя написать так:
Двум разным элементам назначается один и тот же id, что является ошибкой. В результате для второго элемента данный идентификатор не будет назначен на программном уровне не смотря на то что он присутствует в коде и при попытке обратиться к нему через txt1 ни чего не произойдёт. Селектор id чаще всего используется в javascript, а class в css. Рассмотрим обращение к селекторам из css:
В первом случае — .txt1 мы обращаемся к элементу или нескольким элементам с class=’txt1′. Точка в css является спецсимволом обозначающим начало имени класса. Во втором случае — #txt1 мы вызываем элемент с id=’txt1′. Соответственно символ решетки обозначает начало id.
В javascript с использованием библиотеки jquery обращение к элементам очень похоже. Мы сейчас не будем рассматривать на примере, важно лишь запомнить, что Точка — это class, а Решетка — id. На этом данная часть закончена, жду вас на четвертой части, где мы начнем применять полученные знания на практике:
