Что такое селектор id

"Селектор id". "Что такое селектор id"?

О селекторе "id"

1. Что такое селектор id?
2. Правила именования с селектора id.
3. Пример использования селектора id в файле css.
Живой пример использования селектора id в файле css
Скачать пример использования селектора id в файле css.
4. Пример использования селектора id в теге <style>.
Живой пример использования селектора id в теге <style>.
Скачать пример использования селектора id в теге <style>..

1. Что такое селектор id?

Дадим определение "что такое селектор id?"!?

Селектор(селектор) id в CSS предназначен для выбора элемента с определённым идентификатором (id).

Селектор id позволяет:

Применять уникальные стили к конкретному элементу на странице;

Обращаться к элементу через JavaScript для динамического управления.

См :обратиться по id.

Синтаксис селектора id.

В CSS: css правило начинается с символа решётки (#), за которым следует имя идентификатора:

#id-name {

/* стили */

}

В HTML: используется атрибут id без решётки:

<div id="id-name">Содержимое</div>

2. Правила именования с селектора id.

При создании идентификаторов нужно соблюдать следующие правила:

Уникальность. Значение id должно быть единственным на всей веб‑странице. Дублирование считается ошибкой — браузер применит стили только к первому найденному элементу.

Начало имени селектора id.

Идентификатор должен начинаться с буквы (A–Z, a–z), дефиса (-) или подчёркивания (_). Нельзя начинать с цифры или других символов (например, #50cent — неверно).

Допустимые символы селектора id.

В селекторе id можно использовать :

буквы латинского алфавита (A–Z, a–z);

цифры (0–9);

дефисы (-);

подчёркивания (_).

Регистр селектора id.

Имена чувствительны к регистру: #header и #Header — это разные идентификаторы.

Нельзя в селекторе id.

Запрет на русские буквы. Использование кириллицы недопустимо.

Приоритет селектора id.

Селектор id обладает высокой специфичностью (вес 0,1,0,0).

Это значит, что "селектора id":

Имеет бо́льший приоритет, чем селекторы классов ".class"(селектор class) и тегов (теги html);

Уступает только стилям, заданным через атрибут style в HTML.

например :

<div style="color:red">С селектором id.</div>

3. Пример использования селектора id в файле css.

Для того, чтобы создать пример использования "селектора id в файле css" вам понадобится:

Начинаем с html:

Используем код(страница html).

Используем какой-то из тегов(теги html) пусть это будет div.

В начальный тег помещаем атрибут id :

<div>Без селектора id.</div>

<div id="example">С селектором id.</div>

Далее нужен CSS‑файл:

Как вы знаете есть 3 способа css:

Создаем CSS‑файл.

Прикрепляем его к странице.

Внутри файла прописываем css правило.

#example {

color: red;

}

Здесь :

color - свойство(цвет).

red - значение(красный);

Живой пример использования селектора id в файле css.

https://jsphp.ru/example/css/id_in_file/example_id.html

Скачать пример использования селектора id в файле css.

Пример использования селектора id в файле css скачиваем здесь.

4. Пример использования селектора id в теге <style>.

Все тоже самое, что было рассказано выше повторяем с тегом : тег style.

Единственная разница от выше рассказанного способа... это расположение селектора идентификатора внутри тега style...

Живой пример использования селектора id в теге <style>.

https://jsphp.ru/example/css/id_in_teg_style/id_in_teg_style.html

Скачать пример использования селектора id в теге <style>.

Скачать здесь.

Всего комментариев : Comments+ 2.0

+ =