Как указать id в css
Перейти к содержимому

Как указать id в css

  • автор:

Селекторы CSS по id

Помимо селекторов по названию тега и названию класса есть ещё селекторы по уникальному атрибуту id. В отличии от классов id может иметь только одно значение. Нельзя написать несколько значений через пробел по аналогии с клсами. Значение атрибута id должно быть уникальным на всю страницу. В противном случае на некоторых браузерах селектор может не работать.

Рассмотрим пример использования селектора по id элемента. Представим что есть любой тег с атрибутом id:

Тише, мыши. Кот на крыше.

Обратиться к такому элементу по id можно по тому же принципу, что и при обращении к классу, но вместо точки перед значением атрибута необходимо поставить решётку «#«.

#test

В браузере получим такой результат:

Тише, мыши. Кот на крыше.

Как и в случае с классами можно обращаться к вложенным элементам. К примеру, для такой вложенности тегов:

 Тише, мыши. Кот на крыше.  

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

Выбираем для стилизации элемент с уникальным атрибутом 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; >      

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

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

Как указать id в css

Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или нескольких селекторов(3) и блока определения(2), выделяющегося фигурными скобками.

Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу &ltp>соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки <>, внутри которых следует писать CSS свойства.

CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте покрасим все абзацы в красный цвет:

Так код будет выглядеть в браузере:

А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:

Так код будет выглядеть в браузере:

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

2.Селекторы CSS

С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.

В CSS существуют следующие виды селекторов:

Селекторы выбора

Вы можете выбирать элементы на странице для оформления по названию тэга.

Селектор id

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

Идентификатор для элемента задается с помощью атрибута id (&ltp >текст&lt/p>).

Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ «#» (#идентификатор ).

#test1
color:green;
font-family:verdana;
font-size:1.2em;
>

3.Селектор class

Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.

С помощью атрибута class можно задать, что элемент относится к группе (&ltp >текст&lt/p>).

Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ «.» (.имя_группы ).

.test1
<
color:green;
font-family:verdana;
font-size:1.2em;
>

4.Комбинирование селекторов

Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.

Например, Вы можете комбинировать селекторы тэгов с селекторами class:

h2.test1
<
color:green;
font-family:verdana;
font-size:1.2em;
>

Свойства будут применены только к тем элементам с , которые являются заголовками.

Также Вы можете комбинировать селекторы тэгов:

div p
<
color:green;
font-family:verdana;
font-size:1.2em;
>

Свойства будут применены только к тем элементам p, которые находятся внутри элементов div

Символ «+» позволяет выбирать элементы, которые идут сразу после указанного.

div+p
<
color:green;
font-family:verdana;
font-size:1.2em;
>

Свойства будут применены только к тем элементам p, которые идут сразу после элементов div

Следующие задания предлагаю выполнить самостоятельно

Практическое задание 1

Оформите элементы согласно их описанию.

&lth3>Покрасьте меня в розовый цвет (color:pink).&lt/h3>

&ltp>Данный элемент должен остаться неоформленным.&lt/p>

p >Покрасьте меня в серый цвет (color:grey).&lt/p>

&ltdiv>Данный элемент должен остаться неоформленным.&lt/div>

&ltdiv>&ltp>Покрасьте меня в красный цвет (color:red).&lt/p>&lt/div>

&lth4>Данный элемент должен остаться неоформленным.&lt/h4>

&ltp>Покрасьте меня в зеленый цвет (color:green).&lt/p>

&ltp >Покрасьте меня в желтый цвет (color:yellow).&lt/p>

Идентификаторы

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

Синтаксис

Здесь E — обозначает любой тег. При описании идентификатора вначале указывается символ решётки (#), затем идёт имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит с помощью атрибута id , значением которого выступает имя идентификатора ( id=»Имя_идентификатора» ). Символ решётки при этом уже не указывается.

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Идентификаторы    

Результат примера показан на рис. 1.

Вид текста, оформленного с помощью идентификатора

Рис. 1. Вид текста, оформленного с помощью идентификатора

Браузеры

В браузере Internet Explorer до версии 6.0 включительно идентификаторы иногда игнорируются, если они комбинируются с селекторами тегов или классами.

CSS по теме

  • [атрибут$=»значение»]
  • [атрибут*=»значение»]
  • [атрибут=»значение»]
  • [атрибут^=»значение»]
  • [атрибут|=»значение»]
  • [атрибут~=»значение»]
  • Вложенные селекторы
  • Дочерние селекторы
  • Идентификаторы
  • Классы

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

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