Как обратиться по id css
Перейти к содержимому

Как обратиться по id css

  • автор:

Атрибут id

Атрибут id задает уникальный идентификатор для тега, чтобы к нему можно было обратиться через CSS.

Существует также атрибут class , который подобно атрибуту id позволяет выбирать элементы на HTML странице.

Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).

Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код). Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут появится в дальнейшем — давайте этому элементу класс. Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript, но она не является общепринятой.

Названия id должны быть набраны английскими буквами, цифрами, без пробелов. Значение атрибута id не должно начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).

Имена id следует давать на английском языке (а не на русском, просто английскими буквами). Имена должны быть осмысленными, отражать суть элемента.

Пример

Давайте теперь зададим абзацу, у которого задан атрибут с id в значении elem , красный цвет текста:

Абзац с id elem.

Контрольный абзац без id.

#elem < color: red; >

CSS. Как обратиться к элементу по id?

Как обратится к элементу по ID.
У меня есть два элемента — span и input[checkbox].
Мне нужно чтобы при изменении чекбокса менялись стили span.
Проблема в том, что они находятся в разных местах страницы.

 
TEST
#ch: checked
  • Вопрос задан более трёх лет назад
  • 774 просмотра

1 комментарий

Простой 1 комментарий

Posho

если они в разных местах страницы — только js
Решения вопроса 1

Ankhena

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

При такой разметке на CSS никак.

  
TEST

#ch:checked + div .sp <>

Суть в том, что вы скрываете сам инпут. Делать это нужно используя CSS паттерн visually-hidden (вариантов несколько, легко гуглятся) для того, чтобы осталась функциональность для доступности.
А стилизуется лейбл или его псевдоэлемент.
Клик происходит по лейблу, но инпут переключается, потому что они связаны. Находится при этом лейбл может где угодно.
Нюанс один: при клике на лейбл, браузер прокручивает страницу к тому месту, где находится инпут. Так что аккуратно, если они совсем в разных местах.

Выбор элемента по уникальному id в CSS

Как вы уже знаете, классы предназначены, чтобы присваивать их группе элементов. Кроме классов, можно также выбирать элементы по id , представляющим собой уникальный идентификатор элемента. Под уникальностью понимается то, что если у нас на странице уже есть элемент с таким id , то другого элемента с таким же id быть не должно.

Уникальный идентификатор задается с помощью атрибута id , в котором пишется придуманное нами имя. Давайте, например, сделаем два блока. Первому зададим id в значении block1 , а второму — в значении block2 :

Чтобы обратиться к элементу с заданным id , нужно написать символ # и придуманное нами имя, вот так:

#block1 < color: red; >#block2 < color: green; >

Атрибут id используется в том случае, когда необходимо подчеркнуть уникальность элемента. Классы используются тогда, когда предполагается, что таких элементов может быть много, даже если он сейчас один.

Дан следующий код:

Title

text

text

Title

text

text

Title

text

text

Покрасьте содержимое блока elem1 в красный цвет, блока elem2 — в зеленый, а блока elem3 — в голубой.

Селектор по идентификатору

Выбираем для стилизации элемент с уникальным атрибутом id .

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 9 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Селектор по идентификатору находит на странице элемент, которому задан атрибут id с конкретным значением.

Пример

Скопировать ссылку «Пример» Скопировано

 

Какой-то текст

Красивый блок
p id="first" class="paragraph">Какой-то текстp> div id="second">Красивый блокdiv> form id="last" action="" method="get">form>
 #first  color: red;> #last  border: 2px solid green;> #first  color: red; > #last  border: 2px solid green; >      

В этом примере в HTML есть три элемента с разными идентификаторами. В CSS для элемента с идентификатором first прописываем, что цвет текста должен быть красным, а для элемента с идентификатором last задаём рамку зелёного цвета шириной в 2 пикселя.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 #id  color: black;> #id  color: black; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Если нужно применить стили только к одному конкретному элементу, то ему задают идентификатор при помощи атрибута id и используют его в качестве селектора в CSS.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Идентификатор чувствителен к регистру. Для браузера id = «my Tag» и id = » My Tag» будут двумя разными идентификаторами.

�� В имени идентификатора нельзя использовать пробел.

�� Селектор по идентификатору имеет очень высокую специфичность. У одного блока зададим и класс и идентификатор:

   

Some text

section class="class" id="id"> p>Some textp> section>

В стилях напишем два блока правил. В первом случае используем в качестве селектора идентификатор, а во втором случае используем в качестве селектора класс.

 #id  color: red;> .class  color: green;> #id  color: red; > .class  color: green; >      

В итоге цвет текста будет красным, потому что селектор по идентификатору более специфичный, чем селектор по классу.

Подробнее про специфичность читайте в статье «Специфичность».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *