—»     —»   Селекторы атрибутов в CSS - используете ли вы их?
  Раздел: CSS/Style Sheets   Комментариев: 1  

Селекторы атрибутов в CSS - используете ли вы их?



Селекторы атрибутов в CSS - используете ли вы их?

Селекторы CSS являются крайне важным ингредиентом в разработке веб-сайтов. Они, собственно, и привязывают наш код CSS к коду HTML. Расскажите нам, какими селекторами пользуетесь именно вы?

Если бы я отвечал на этот вопрос, то ответил бы, что не сильно много. Я предпочитаю использовать простенькие селекторы типа элементов html, классов, id и так далее. Но ведь в стороне остается огромное множество не менее полезных селекторов?

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

Подобная статья займёт явно не один пост, так что давайте ознакомимся с тем, о чем пойдет речь:

* Селекторы атрибутов – связка с элементами посредством атрибутов HTML
* Комбинаторы – комбинируем селекторы для еще большего *могущества*
* Псевдо-классы – элементы, которые мы можем определить в конкретных условиях.

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

Простые селекторы

Простые селекторы включают в себя селекторы типа, универсальные селекторы, селекторы атрибута, селекторы класса, селекторы id и псевдо-классы. Оставим псевдо-селекторы до следующей части статьи.

Заметка: числа, указанные в скобках, определяют уровень css, на котором был представлен селектор.

Селекторы типа (1) E подходят для любого элемента типа E: мы можем использовать любой элемент нашего HTML-документа в качестве селектора. Почти все созданные CSS-файлы имеют раздел о том, как должны быть оформлены HTML-элементы, и селекторы типа формируют большинство из перезагрузочных CSS (CSS Reset).

Универсальные селекторы (2) * подходят для любого элемента: Если существует некий стиль, который вы хотите применить ко всем элементам сразу, то можно воспользоваться именно таким типом селектора. Универсальный селектор был первым из перезагрузочных CSS, так как его зачастую использовали для того, чтобы задать всем элементам нулевое значение полей и отступов.

Селекторы классов (1) E.myclass подходят для любого элемента c классом myclass: любой набор стилей с возможностью повторного применения на странице должен быть указан в качестве класса.

Селекторы ID (1) E#myid подходят для любого элемента c ID «myid»: любой набор стилей, который вы хотите применить к одному элементу единожды на странице, должен быть указан в качестве ID.

Сдается мне, вы уже давно знакомы со всеми представленными классами. Давайте перейдем к селекторам атрибутов (атрибутивным селекторам), с которыми вы, вероятно, знакомы более отдаленно.

Атрибутивные селекторы

Атрибутивные селекторы впервые были добавлены в CSS2, а еще больше их было представлено далее, в CSS3. Смею признаться, что я не пользуюсь ими настолько часто, насколько следовало бы их использовать.

E[foo] (2): подходит для элемента E с атрибутом «foo»

<a href="yoursite.com/somepage.html" rel="external">
<a href="mypage.html" rel="internal">

a[rel] {color: green;}

Обе представленные выше ссылки должны быть зелеными, так как они обе содержат атрибут «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;}

Опять же, обе ссылки окрашены в зеленый цвет, так как обе содержат одинаковое значение «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;}

Опять же, здесь выбрана вторая ссылка, так как она оканчивается на php. Данный селектор, возможно, будет отличным решением для определения ссылок на конкретные типы файлов. Я не уверен насчет того, если вы надумаете по-разному оформить изображения форматов jpg и png. Лучше применить следующий вариант:

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: green;}

Здесь только вторая ссылка будет зеленой, так как её значение начинается с «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;}

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

Атрибуты против классов и id

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

Тем не менее, многие элементы в вашем документе HTML будут иметь атрибуты по разным причинам.

Ссылки всегда будут обозначены атрибутом href, а также зачастую атрибутами title. Изображения будут обозначены атрибутом alt. К формам будет применен атрибут type. Это уже достаточное число атрибутов в вашем документе HTML, так почему бы не воспользоваться уже представленным преимуществом?

Мы также можем использовать еще больше атрибутов в будущем, так как в скором будущем ожидается возможность внесения HTML5 microdata в страницы. Опять же, почему не воспользоваться преимуществом?

Браузерная поддержка

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

* CSS contents and browser compatibility (Браузерная совместимость элементов CSS)
* CSS3 Attribute Selectors (Атрибутивные селекторы CSS3)
* CSS selectors: basic browser support (CSS селекторы: основная поддержка среди браузеров)
* Can I Use: Selectors (Могу ли я использовать: Селекторы)
* CSS3 Selectors Test (Тестирование селекторов CSS3)

Подведем итоги

Селекторы являются основной частью синтаксиса CSS, и они предоставляет нам возможность связывать HTML-документы с CSS. Я просто уверен, что вы пользуетесь элементарными селекторами, классами или ID-селекторами, а также, возможно, и универсальными селекторами.

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

На следующей неделе я расскажу вам о комбинаторах и других селекторах псевдо-классов.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10962   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 сентября 2011 @ 03:34
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Селекторы атрибутов эта классная возможность в CSS для выбора определённых элементов.
Сам часто пользуюсь ими и очень доволен =).


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Стать представителем косметики
Натуральная израильская косметика Мертвого моря. Доставка без предоплаты
annakloos.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2018    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930