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

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

  • автор:

Css-селекторы

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

Селекторы делятся на несколько видов:

  • по типу ( H1 , TD , HR . );
  • универсальный селектор — * — обозначает элемент любого типа;
  • селекторы атрибутов ( [data-name] , [data-name$=»hidden»] );
  • селекторы по классу ( .main , .header__nav );
  • селекторы по ID ( #form , #submit );
  • псевдо-классы:
    • динамические ( :hover и т.д.);
    • селектор цели ( :target );
    • селектор по языку ( :lang(en) );
    • состояния элементов интерфейса ( :enabled , :checked . );
    • структурные псевдоклассы ( :root , :nth-child );
    • псевдокласс отрицания ( :not(P) ).

    Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

    Селекторы из CSS1

    Самые простые и хорошо всем знакомые:

    • обращение к элементу по тегу ( BODY , A , TABLE и т.д.);
    • по ID ( #main );
    • по классу ( .header-image );
    • обращение к потомку через родителя ( UL A , .sidebar .widget );
    • состояния ссылок A:link , A:visited , A:hover ;
    • псевдоэлемент для первой строки текста — P::first-line ;
    • псевдоэлемент для первого символа в тексте — P::first-letter .

    Селекторы из CSS2

    В этой спецификации добавилось много интересного:

    • * — универсальный селектор. Например, * уберет отступы у всех элементов на странице.
    • E[foo] — элементы с заданым атрибутом. Например, код:

    P[data-content]  border: 2px solid crimson; >
    P[data-content="hello"]  border: 2px solid orange; >
    P[data-content~="hello"]  border: 2px solid yellowgreen; >
    P[data-content|="hello"]  border: 2px solid steelblue; >
    P:first-child  background: gold; >
    P:lang(ru)  background: crimson; >
    DIV > A  background: darkviolet; color: #FFF; >
    P + H3  background: darkturquoise; color: lightseagreen; >

    Ссылки по теме: Сколько весят селекторы? CSS-селекторы одной таблицей Метки: селекторы
    Показать комментарии

    Сайдбар

    Статьи

    • Математические функции в CSS
    • Адаптивное видео с помощью встроенных математических функций CSS
    • Недоступность в картинках
    • Единицы размеров в CSS
    • Генератор цветовых тем
    • Jekyll → Gatsby
    • Вариативные шрифты
    • Размеры в SVG
    • Адаптивный Pixel Perfect
    • Логотип не отвечает или временно недоступен
    • SVG-паттерны
    • Мыльные пузыри на SVG
    • SVG-градиенты
    • Весёлая консолька
    • SVG-маски
    • Умная прокрутка со Scroll Snap Points
    • CSS-анимации для ротации изображений
    • Анимированные SVG-маски
    • Странности обводки в SVG
    • SVG-прелоадеры
    • Анимируем градиенты ещё раз
    • Background-blend-mode
    • Возможности оформления SVG
    • CSS и SVG маски
    • Nth-child и nth-of-type
    • SVG-иконки
    • SVG: заливка и обводка
    • SVG-path
    • SVG: группировка и переиспользование элементов
    • SVG-фигуры и трансформации
    • SVG
    • СSS-градиенты и 3D
    • Рисовалка анимированных теней
    • Свежие CSS-паттерны
    • CSS-паттерны
    • Радиальные градиенты
    • Линейные градиенты
    • Крестики-нолики на CSS
    • Border-image
    • Электронные часы на CSS и JS.
    • Сколько весят селекторы?
    • Символы юникода
    • Свойство content
    • Анимируем CSS-градиенты
    • Текстовые эффекты
    • Древовидный список на CSS
    • Css-селекторы, часть 2
    • Css-селекторы
    • Контекст наложения
    • Два способа «прошить» элемент по краю
    • Box-sizing
    • Цвета в CSS
    • Фон под строчками: добавляем поля
    • Box-shadow
    • Css-фигуры: лепесток
    • Transform
    • Css Animation
    • 3D-куб
    • Border-radius
    • First letter
    • Эти глаза напротив
    • CSS-фигуры
    • Стрелки с помощью свойства border
    • Flexbox

    Страницы

    • SVG: полезные ссылки
    • CSS-селекторы одной таблицей
    • Таблица именованных цветов
    • Функции Transform
    • Свойства Transform
    • Свойства Animation одной таблицей
    • Разный синтаксис Flexbox
    • Свойства Flexbox одной таблицей

    Проекты

    Атрибут 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; >

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

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

    Синтаксис

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

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

    HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

    Браузеры

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

    CSS по теме

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

    Обращение по имени name

    Правила ровно такие же, как если бы это писалось на CSS:

    // Js // 1 вариант let input = document.querySelector('input[name="available.instore"]'); console.log(input.value); // 2 вариант let input2 = document.getElementsByName("available.instore"); console.log(input2[0].value); // Jquery let $input = $('input[name="available.instore"]'); console.log($input.val())

    Отслеживать

    ответ дан 14 мар 2021 в 14:44

    Алексей Шиманский Алексей Шиманский

    71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков

    Похожие публикации:
    1. Как восстановить скрытые фото на xiaomi
    2. Как обновить telegram на андроиде
    3. Как сделать переадресацию в html
    4. Почему портится качество при сохранении автокада

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

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