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

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

  • автор:

CSS по БЭМ

В БЭМ-методологии CSS используется для оформления страниц и является одной из технологий реализации блока.

Основные принципы работы с CSS рассматриваются в следующих разделах:

  • Селекторы
    • Селекторы классов
    • Совмещение тега и класса в селекторе
    • Вложенные селекторы
    • Комбинированные селекторы
    • Именование
    • Внешняя геометрия и позиционирование
    • Стилизация групп блоков
    • Принцип единственной ответственности
    • Принцип открытости/закрытости
    • DRY
    • Композиция вместо наследования

    Селекторы

    В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.

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

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

    Значением атрибута class может быть разделенный пробелами список слов. Это позволяет использовать разные БЭМ-сущности на одном DOM-узле.

    Пример

    header class="header"> button class="header__button button button_theme_islands">. button> header> 

    Совмещение тега и класса в селекторе

    Методология БЭМ не рекомендует совмещать теги и классы в селекторе. Объединение тега и класса (например, button.button ) повышает специфичность CSS-правил, что усложняет задачу их переопределения. Это приводит к войнам значимости, при которых таблицы стилей загружаются излишне сложными селекторами.

    Пример

    button class="button">. button> 

    CSS-правила заданы в селекторе button.button .

    Допустим, блоку добавили модификатор active со значением true :

    button class="button button_active">. button> 

    Селектор .button_active не переопределит свойства блока, записанные как button.button , так как специфичность button.button выше чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с тегом button.button_active .

    В результате развития проекта могут, например, появиться блоки с селекторами input.button , span.button и a.button . В таком случае все модификаторы блока button и вложенные в него элементы потребуют четыре разные декларации для каждого случая.

    Нужно стараться использовать простые селекторы классов:

    .button <> .button_active <>

    Вложенные селекторы

    Методология БЭМ допускает использование вложенных селекторов, но рекомендует свести их применение к минимуму. Вложенные селекторы увеличивают связность кода и делают его повторное использование невозможным.

    При использовании вложенных селекторов важно соблюдать принцип инкапсуляции: правила одного блока не должны влиять на внутренний мир другого блока. Элементы — это внутренняя реализация блока. Таким образом, блок влияет только на свои элементы и не может воздействовать на элементы другого блока.

    Вложенность уместна, если необходимо изменить стили элементов в зависимости от модификатора (например, состояния блока или заданной темы):

    Пример

    .button_hovered .button__text < text-decoration: underline; > .button_theme_islands .button__text < line-height: 1.5; >

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

    Методология БЭМ не рекомендует использовать комбинированные селекторы. Комбинированные селекторы (например, .button.button_theme_islands ) имеют более высокую специфичность, чем одиночные селекторы, что усложняет задачу их переопределения.

    Пример

    button class="button button_theme_islands">. button> 

    CSS-правила заданы в селекторе .button.button_theme_islands .

    Допустим, блоку добавили модификатор active с значением true :

    button class="button button_theme_islands button_active">. button> 

    Селектор .button_active не переопределит свойства блока, записанные как .button.button_theme_islands , так как специфичность .button.button_theme_islands выше, чем у .button_active . Для успешного переопределения селектор модификатора блока также должен быть скомбинирован с селектором .button и объявлен ниже .button.button_theme_islands , так как специфичность обоих селекторов одинакова:

    .button.button_theme_islands <> .button.button_active <>

    Нужно стараться использовать простые селекторы классов:

    .button_theme_islands <> .button_active <>

    Именование

    Имя селектора должно полно и точно описывать представляемую им БЭМ-сущность.

    В качестве примера рассмотрим следующие четыре строки CSS-кода:

    .button <> .button__icon <> .button__text <> .button_theme_islands <>

    С определенной долей вероятности можно предположить, что мы имеем дело с одним блоком и его HTML-реализация выглядит следующим образом:

    button class="button button_theme_islands"> span class="button__icon"> span> span class="button__text">. span> button> 

    Сложнее сделать подобное предположение с такой группой селекторов:

    .button <> .icon <> .text <> .theme_islands <>

    Имена icon , text , theme_islands не так информативны.

    • сделать имена CSS-селекторов максимально информативными и понятными;
    • решить проблему коллизии имен;
    • независимо описывать стили блоков и их опциональных элементов.

    Пример

     div class="logo logo_theme_islands"> img src="URL" alt="logo" class="logo__img"> div> div class="user user_theme_islands"> img src="URL" alt="user-logo" class="user__img"> . div> 
    .logo <> /* CSS-класс блока `logo` */ .logo__img <> /* CSS-класс элемента `logo__img` */ .logo_theme_islands <> /* CSS-класс модификатора `logo_theme_islands` */ .user <> /* CSS-класс блока `user` */ .user__img <> /* CSS-класс элемента `user__img` */ .user_theme_islands <> /* CSS-класс модификатора `user_theme_islands` */ 

    Модификаторы

    Модификаторами в БЭМ задают блокам внешний вид, состояние и поведение. Изменение оформления блока производится при помощи установки/снятия модификатора.

    Пример

    button class="button button_size_s">. button> 
    .button < font-family: Arial, sans-serif; text-align: center; > .button_size_s < font-size: 13px; line-height: 24px; > .button_size_m < font-size: 15px; line-height: 28px; >

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

    button class="button button_size_s">. button> button class="button button_size_m">. button> 

    Это избавляет от ненужного «Copy-Paste».

    Миксы

    • совмещать поведение и стили нескольких сущностей без дублирования кода;
    • одинаково форматировать разные HTML-элементы.

    Внешняя геометрия и позиционирование

    В CSS по БЭМ стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок.

    Пример

     header class="header"> button class="button header__button">. button> header> 
    .button < font-family: Arial, sans-serif; text-align: center; border: 1px solid black; /* Рамка */ > .header__button < margin: 30px; /* Отступ */ position: relative; >

    В данном примере внешняя геометрия и позиционирование блока button задана через элемент header__button . Блок button не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

     footer class="footer"> button class="button">. button> footer> 

    Стилизация групп блоков

    Иногда необходимо применить одинаковое форматирование сразу к нескольким различным HTML-элементам веб-страницы. Обычно для решения подобных задач применяют групповые селекторы.

    Пример

    article class="article">. article> footer class="footer"> div class="copyright">. div> footer> 
    .article, .footer div < font-family: Arial, sans-serif; font-size: 14px; color: #000; >

    В данном примере текст внутри блоков article и copyright имеет один и тот же цвет и шрифт.

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

    Поэтому в БЭМ для того, чтобы единообразно отформатировать целый набор HTML-элементов, используют миксы.

    Пример

    article class="article text">. article> footer class="footer"> div class="copyright text">. div> footer> 
    .text < font-family: Arial, sans-serif; font-size: 14px; color: #000; >

    Разделение кода на части

    К CSS по БЭМ применяются основные принципы организации и хранения кода:

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

    Разделение кода на части и строгая организация файловой структуры проекта позволяет:

    • облегчить навигацию по проекту;
    • повторно использовать и переносить компоненты;
    • работать с уровнями переопределения и использовать сборку.

    Пример

    Блок button в файловой структуре проекта:

    button/ # Директория блока button _size button_size_s.css # Реализация модификатора в технологии CSS button.css # Реализация блока button в технологии CSS

    Такое разделение позволяет быстро находить нужные файлы.

    Принцип единственной ответственности

    Как и в объектно-ориентированном программировании, принцип единственной ответственности (англ. Single responsibility principle) в CSS по БЭМ означает, что каждая CSS-реализация должна иметь одну ответственность.

    Пример

    header class="header"> button class="button header__button">. button> header> 
    .button < font-family: Arial, sans-serif; border: 1px solid black; background: #fff; >

    Ответственность: внешняя геометрия и позиционирование (зададим внешнюю геометрию и позиционирование для блока button через элемент header__button ).

    .header__button < margin: 30px; position: relative; >
    .header__button < font-family: Arial, sans-serif; position: relative; border: 1px solid black; margin: 30px; >

    Селекторы с одиночной ответственностью придают коду больше гибкости.

    Принцип открытости/закрытости

    Любой HTML-элемент страницы должен быть открыт для модификации, но закрыт для изменения. Разрабатывать новые CSS-реализации следует так, чтобы не пришлось менять уже существующие.

    Пример

    button class="button">. button> button class="button">. button> 
    .button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; >

    Предположим, что появилась необходимость изменить размер одной из кнопок. Следуя принципу открытости/закрытости, модифицируем кнопку.

    button class="button">. button> button class="button button_size_s">. button> 
    .button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; > .button_size_s < font-size: 13px; line-height: 24px; >

    Существующая функциональность кнопки расширена при помощи класса button_size_s (переопределены свойства font-size и line-height ). Теперь на странице есть две кнопки разного размера.

    Нарушение принципа открытости/закрытости

      Изменение существующей CSS-реализации

    .button < font-family: Arial, sans-serif; text-align: center; font-size: 13px; line-height: 24px; >
    .button < font-family: Arial, sans-serif; text-align: center; font-size: 11px; line-height: 20px; > .content .button < font-size: 13px; line-height: 24px; >

    Оформление кнопки стало зависеть от ее расположения. Изменения коснутся всех блоков button внутри блока content .

    DRY

    Принцип разработки программного обеспечения, нацеленный на снижение повторений в коде.

    Применительно к методологии БЭМ суть данного принципа заключается в том, что каждая БЭМ-сущность должна иметь единственное, однозначное представление в рамках системы.

    Пример

    button class="button">. button> button class="btn">. button> 
    .button < font-family: Arial, sans-serif; text-align: center; color: #000; background: #fff; > .btn < font-family: Arial, sans-serif; text-align: center; color: #000; background: rgba(255, 0, 0, 0.4); >

    Как видно из примера, в селекторе btn повторена существующая реализация блока button .

    Перепишем пример в соответствии с принципом DRY:

    button class="button button_theme_islands">. button> button class="button button_theme_simple">. button> 
    .button < font-family: Arial, sans-serif; text-align: center; > .button_theme_islands < color: #000; background: #fff; > .button_theme_simple < color: #000; background: rgba(255, 0, 0, 0.4); >

    Благодаря добавлению модификаторов, мы избавились от блока btn .

    Важно! Принцип DRY имеет отношение только к функционально однотипным компонентам страницы, например, кнопки.

    Пример

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

    Не имеет смысла объединять разные по типу блоки, только потому что у них, например, одинаковый цвет или размер.

    Пример

    Композиция вместо наследования

    Наследование — это механизм, позволяющий описать новый CSS-класс на основе существующего (родительского, базового). Класс-потомок может добавить собственные свойства, а также пользоваться родительскими.

    Новые CSS-реализации в БЭМ собирают из уже существующих, путем их объединения. Это сохраняет код несвязным и гибким.

    Пример

    Допустим, есть три готовые реализации:

    • кнопка — блок button ;
    • меню — блок menu ;
    • всплывающее окно — блок popup .

    Задача

    Реализовать раскрывающийся список (блок select ).

    Разработать раскрывающийся список с произвольным внешним видом — весьма непростая задача. Однако, если есть готовые компоненты (кнопка, всплывающее окно и меню), остается только правильно описать их взаимодействие.

    Пример

    div class="select"> button class="button select__button"> span class="button__text">Блок span> button> div> div class="popup"> div class="menu"> div class="menu__item">Блок div> div class="menu__item">Элемент div> div class="menu__item">Модификатор div> div> div> 

    Работа с уровнями переопределения

    Применение принципов БЭМ-методологии к CSS позволяет разделять представление блоков по разным уровням.

    Разделение по уровням позволяет:

    • реализовывать новый внешний вид блока на другом уровне переопределения, сохраняя предыдущий, наследовать и дополнять его;
    • полностью перекрывать внешний вид блока (переопределять);
    • добавлять блоки с новым представлением.

    С помощью уровней переопределения можно создать универсальную CSS-библиотеку блоков и изменять ее на проектном уровне. Затем использовать сборку и включать в проект только необходимое представление блоков.

    Пример

    common.blocks/ button/ button.css # Базовая CSS-реализация кнопки desktop.blocks/ button/ button.css # Особенности кнопки для desktop mobile.blocks/ button/ button.css # Особенности кнопки для mobile

    При сборке в файл desktop.css попадут все базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня desktop .

    @import "common.blocks/button/button.css"; /* Базовые CSS-правила */ @import "desktop.blocks/button/button.css"; /* Особенности desktop */ 

    Файл mobile.css будет включать базовые CSS-правила кнопки с уровня common и переопределенные правила с уровня mobile .

    @import "common.blocks/button/button.css"; /* Базовые CSS-правила */ @import "mobile.blocks/button/button.css"; /* Особенности mobile */ 

    Разделение представления блока button по разным уровням позволяет:

      Полностью перекрыть внешний вид блока на другом уровне переопределения. common.blocks/button/button.css

    .button < font-family: Arial, sans-serif; font-size: 11px; line-height: 24px; background: #fff; >

    desktop.blocks/button/button.css

    .button < font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 28px; background: yellow; >
    .button < font-family: Arial, sans-serif; font-size: 11px; line-height: 24px; background: #fff; >

    desktop.blocks/button/button.css

    .button < background: #fff; color: rgb(255, 0, 0); box-shadow: 0 0 10px rgba(0,0,0,0.5); >

    Как перейти на CSS по БЭМ

    Чтобы реализовать принципы БЭМ в проекте, необходимо:

    • абстрагироваться от DOM-модели и научиться создавать блоки;
    • не использовать ID-селекторы и селекторы тегов;
    • минимизировать количество вложенных селекторов;
    • использовать соглашение по именованию CSS-классов, чтобы избежать коллизии имен и сделать имена селекторов максимально информативными и понятными;
    • работать в единых терминах блоков, элементов и модификаторов;
    • выносить в модификаторы CSS-свойства блока, изменение которых кажется вероятным;
    • использовать миксы;
    • разделять код на мелкие независимые части для удобства работы с отдельными блоками;
    • повторно использовать блоки.

    Как начать реализовывать идеи БЭМ в существующем проекте

    • Создавайте новые компоненты по БЭМ, а старые изменяйте по мере необходимости.
    • Проектируйте блоки, руководствуясь принципами, описанными выше.
    • Используйте префиксы в именах CSS-классов (например, bem- ), чтобы отличить новый код от старого.

    После знакомства с CSS по БЭМ переходите к рассмотрению особенностей реализации JavaScript по БЭМ-методологии.

    Селекторы CSS и их применение в автоматизации тестирования Программного Обеспечения

    Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».

    Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:

и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:

.button_submit

Добро пожаловать в мир CSS.

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:

(все названия css классов уменьшены с помощью оптимизатора)

, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’] , вместо XPath: //form//button[@type=‘submit’]

Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).

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

css для элемента button: .button_submit , при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button . Порядок классов роли не играет, поэтому их можно поменять местами:

 .wrapper_button.button_submit .

Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –

css: button.

И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::

button.button_submit

и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’] . Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id] . Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’] , но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit . Соединять все вместе также достаточно просто:

button[type=‘submit’].button_submit тег атрибут класс

Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:

css:form > div > div > div > button.button_submit

и знак > позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “ . Используя данный указатель мы можем быстро найти элемент внутри формы:

Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit

Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span :

  
Ссылка

[data-id=‘link’] + button найдет button , у которого выше на один уровень есть родственник с атрибутом data-id=”link” . Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.

div + span[data-id=‘link’] + button

Дополнительно вы можете собирать “паровозик” из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов.

Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’] — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’] .

Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.

a[href^=“https:”] — найдет все ссылки, которые начинаются с https,
a[href$=“.pdf”] — найдет все ссылки, которые заканчиваются на .pdf.

Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:

  Как найти второй div > у div >? Варианта два:

div > div:nth-of-type(2) div > div:nth-child(2)

Но в чем различие между этими двумя селекторами? Дополним пример:

   css 1 вариант: div > div:nth-of-type(2) 
css 2 вариант: div > div:nth-child(2)

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

первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div , который является потомком родителя . Второй

у элемента

это строка номер два.

Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child , и тогда вам будет неважно, куда поместят ссылку

наверху, между

или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.

Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”] . А что если есть существует более быстрый способ поиска по id элемента?

#value. “#” - указатель, что поиск осуществляется по id.

Используя все приобретенные навыки попробуйте написать селектор для кнопки

 Отправить … 

Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.

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

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

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

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

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

#test

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

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

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

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

Атрибут id

В HTML есть много атрибутов, и у каждого из них своя задача. Познакомимся поближе с атрибутом id . В его названии изначально заложен основной смысл — identifier, то есть идентификатор. Он задаёт HTML-элементу уникальное название, которое должно быть единственным в рамках документа.

Значение атрибута

Есть несколько условий, которые нужно учитывать при задании атрибута id :

  • Значение должно содержать как минимум один символ.
  • Значение не должно содержать пробелов, табуляций и так далее.
  • Значение должно начинаться с латинской буквы, потому что цифры и символы _ , — , . не были разрешены в HTML4 и могут вызвать проблемы с совместимостью.

Использование атрибута

Стилизация

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

Атрибут id должен быть уникальным на странице, но класс — нет. Он позволяет как обращаться к конкретному элементу, так и стилизовать элементы группами, если у них задан одинаковый класс. Ещё одно различие — значение id всегда должно быть одно, но элементу можно задать несколько значений в атрибуте class , указывая их через пробел.

Связывание поля ввода и подписи по id

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

Связать поле ввода и подпись к нему можно, просто обернув поле ввода в тег label вместе с текстом подписи. Но такой способ в некоторых случаях может быть неудобен — например, когда в разметке между полем и подписью есть другие элементы. В таких случаях будет полезен второй способ — с использованием id . Чтобы связать поле ввода и подпись с его помощью нужно:

  1. Добавить полю ввода идентификатор, задав значение атрибуту id .
  2. Добавить тегу label атрибут for и указать в нём значение идентификатора поля ввода.

Создание якоря с помощью id

Можно задать идентификатор фрагменту в любом месте HTML-страницы, а затем получать быстрый доступ к нему через id . Такой якорь удобен, когда на странице много данных, и нужно иметь возможность быстро перейти к определённому разделу.

Для создания якоря нужно:

  1. Присвоить атрибут id элементу, к которому мы хотим иметь быстрый доступ.
  2. Добавить ссылку на этот элемент там, откуда мы хотим осуществлять переход.

Например, можно сделать навигацию по странице в начале документа, а ссылки на разделы превратить в якоря, тогда можно будет быстро пролистывать страницу к нужному разделу, кликнув по его названию.

Также с помощью id можно ссылаться на конкретное место в другом документе, дописав в конце адреса идентификатор нужного фрагмента.

Получение доступа к элементу из JavaScript

С HTML-элементом часто нужно работать из JavaScript. В языке есть специальный метод, чтобы найти элемент по атрибуту id и получить к нему доступ — getElementById() . Дальше с найденным элементом можно производить нужные действия.

const button = document.getElementById('button'); button.addEventListener('click', function () < alert('Click!'); >); 

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

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