А вы используете 7 селекторов атрибутов?
Селекторы CSS являются значимым ингредиентом при разработке веб сайта. Они привязывают код CSS к разметке HTML. Сколько различных шаблонов селекторов вы регулярно используете?
Скорее всего, немного. Обычно список ограничивается простыми селекторами элементов HTML, классов и идентификаторов. Но возможных селекторов значительно больше.
В этом и последующем уроках будет представлено 42 варианта селекторов, которые могут существенно улучшить ваш код.
В данной серии уроков мы рассмотрим следующие типы селекторов:
- Селекторы атрибутов — используем атрибуты HTML для выбора элементов.
- Комбинаторы — комбинирование селекторов для более точного указания элементов.
- Псевдо классы — элементы, которые мы можем использовать при определенных условиях.
Комбинаторы и псевдо классы будут рассмотрены в последующих уроках серии.
Для начала взглянем на простые селекторы.
Примечание: в скобках указана версия CSS, в которой появился селектор.
Простые селекторы
Простые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке
Селектор типа (1) E (соответствует любому элементу типа E) — Мы можем использовать любой элемент HTML в селекторе.
Универсальный селектор (2) * (соответствует любому элементу) — Если есть стиль, который нужно использовать для всех элементов на странице, то используем данный селектор.
Селектор класса (1) .class (соответствует элементу с классом class) — любой набор стилей, который можно использовать для любых элементов, обладающих определенным классом.
Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.
Скорее всего, вы используете простые селекторы в своей работе, и они не нуждаются в подробном описании. Давайте рассмотрим селекторы атрибутов, которые могут быть вам мало знакомы по причине редкого использования.
Селекторы атрибутов
Селекторы атрибутов были введены в CSS2 и расширены в CSS3.
E[foo] (2) — соответствует элементу E с атрибутом “foo”.
<a href="/yoursite.com/somepage.html" rel="external"> <a href="/mypage.html" rel="internal">
Обе ссылки будут иметь зеленый цвет, так как содержат атрибут rel.
E[foo="bar"] (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.
<a href="/yoursite.com/somepage.html" rel="external"> <a href="/mypage.html" rel="internal">
a[rel="external"] { color: green }
Только первая ссылка будет иметь зеленый цвет, так как только она обладает атрибутом rel со значением “external.”
E[foo~="bar"] (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar".
<a href="/yoursite.com/somepage.html" rel="external friend bob"> <a href="/mypage.html" rel="internal friend janice">
a[rel~="friend"] {color: green}
Обе ссылки будут иметь зеленый цвет, так как обе имеют атрибут rel со значением friend в списке, разделенном пробелом.
E[foo^="bar"] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.
<a href="/yoursite.com/somepage.html" rel="external friend bob"> <a href="/mypage.html" rel="internal friend janice">
a[href^="my"] {color: green}
Вторая ссылка имеет зеленый цвет, так как значение атрибута href у нее начинается со строки “my.”
E[foo$="bar"] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar".
<a href="/yoursite.com/somepage.html" rel="external friend bob"> <a href="/mypage.php" rel="internal friend janice">
a[href$="php"] {color: green}
Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href заканчивается строкой "php". Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.
E[foo*="bar"] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.
<a href="/yoursite.com/somepage.html" rel="external friend bob"> <a href="/mypage.php" rel="internal friend janice">
a[href*="page"] {color: green}
Обе ссылки будут иметь зеленый цвет, так как значение атрибута href содержит строку “page”.
E[foo|="en"] (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.
<a href="/yoursite.com/somepage.html" rel="external-friend-bob"> <a href="/mypage.php" rel="internal-friend-janice">
a[rel|="internal"] {color: gree}
Только вторая ссылка будет иметь зеленый цвет, так как значение ее атрибута начинается с “internal.”
Множественный селектор атрибутов
Можно объединять несколько селекторов атрибутов вместе:
<a href="/yoursite.com/somepage.html" rel="external friend bob"> <a href="/mypage.php" rel="internal friend janice">
a[rel~="friend"][rel~="external"] {color: green}
Приведенный в примере селектор соответствует первой ссылке, так как только у нее есть в списке значений атрибута обе указанных строки.
Атрибуты или класса и идентификаторы?
Каково же преимущество использования атрибутов перед классами и идентификаторами?
Если добавлять атрибут специально для использования селектора, то преимуществ нет.
Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто - атрибут title. Изображения всегда имеют атрибут alt. Элементы формы используют атрибут type. В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?
Кроме того, HTML5 имеет новый атрибут - data, который также может нести двойную нагрузку.
Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/zzYgXqmeGWI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Жизнь подобна универмагу: в ней находишь всё, кроме того, что ищешь Кроткий Эмиль - (1892—1963) - русский поэт–сатирик, юморист и афорист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.