Селектор атрибутов CSS

Практически все верстальщики знают о существовании селекторов атрибутов css и хоть раз да встречали у себя в коде конструкции из разряда input[type=»submit»], но лишь избранные единицы знают, что на самом деле их существует 7 разновидностей, каждая из которых открывает достаточно широкие возможности по отбору тегов из кода нашей страницы.

Описание селектора атрибутов CSS

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

Синтаксис – квадратные скобки внутри которых находится название атрибута.

Классификация и использование селекторов атрибутов

По наличию атрибута

Позволяет отобрать все элементы у которых задан атрибут с определенным названием. В нашем примере все теги у которых прописан title станут подчеркнутыми.

По точному значению атрибута

Пожалуй наиболее часто встречающаяся разновидность данного атрибута. Задает точное соответствие. Будут выбраны только те input, у которых атрибут type задан submit.

По частичному значению атрибута

Позволяет отобрать элементы, среди заданных значений которых присутствует наше. Для лучшего понимания поясню на примере: все p у которых среди заданных классов встречается useful попадут под данный селектор. (“useful superText”- попадет,  “useful”- попадет,  “superText”- не попадет).

Селектор классов по сути является частным случаем данного селектора атрибутов.

По конкретным значениям атрибутов

Отбор по атрибуту значение которого равно значению селектора или же содержит в себе данное значение с идущим после него дефисом.

Чтобы лучше понять скажу, что в примере элементы с lang=»en», lang=»en-us», lang=»en-au» будут выбранны, а с lang=»ru», lang=»english» нет.

По началу значения атрибута

Отберет атрибуты значение которых начинается с заданного нами. Пояснения: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – будут выбраны, alt=”I want pony” – не будет выбрано.

По окончанию значения атрибута

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

В примере будут выбраны все изображения, ссылающиеся на файлы .png.

По подстроке в значении атрибута

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

Выберутся все элементы включающие в себя интересную нам подстроку. Пояснение: ссылки с атрибутами href=”/” , href=”vaden-pro.ru”, href=” /vse-o-selektorah” – будут выбраны, а href=”http://vadenpro.ru” уже нет.

Комбинирование

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

А так мы подчеркнем только те ссылки у которых прописан тайтл и которые ссылаются на сайт vaden-pro.ru.

vaden-pro.ru

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with a target="_blank" attribute:

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

The example above will match elements with title=»flower», title=»summer flower», and title=»flower new», but not title=»my-flower» or title=»flowers».

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( — ), like class="top-text"! 

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value does not have to be a whole word! 

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with "test":

Note: The value does not have to be a whole word!  

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!  

Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

Tip: Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.

More Examples of CSS Selectors

Use our CSS Selector Tester to demonstrate the different selectors.

For a complete reference of all the CSS selectors, please go to our CSS Selectors Reference.

www.w3schools.com

Описание селектора:

• Выполняемая задача — выбор всех элементов по наличию или значению заданного атрибута.
• Обозначение — запись, определяющая тип селектора в квадратных скобках.

Важно! IE6 не понимает этот селектор.

Подробнее про селектор атрибутов

Фактически, и селектор класса, и селектор идентификатора являются частными случаями селектора атрибутов (так как class и id — это просто атрибуты, значения которых мы используем, чтобы найти какие-то элементы).

CSS2 предоставляет 4 варианта селекторов атрибутов. Рассмотрим их по порядку (новые возможности CSS3 см. ниже).

Выбор по наличию атрибута

Выбираем все элементы, у которых существует (задан в HTML) данный атрибут.

Синтаксис:

Тут и далее Element, это какой-либо простой селектор (div, p, .header, div#popup, * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит универсальный селектор, который, в этой ситуации можно опустить.

Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:

Выбор по точному значению атрибута

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

Синтаксис:

Пример. Зададим цвет фона только для тех input, значение атрибута type которых в точности равно "submit" (для кнопки отправки формы):

Выбор по частичному значению атрибута

Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.

Синтаксис:

Пример. Зададим обтекание для тех элементов div, в перечне значений атрибута class, которых присутствует "sideBar" (вот это-то и есть, фактически, селектор класса):

Выбор по конкретным значениям атрибутов

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

Синтаксис:

Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):

Новые селекторы атрибутов в CSS3

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

Выбор по началу значения атрибута

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

Синтаксис:

Пример. Зададим стили для всех элементов, атрибут title которых начинается со слова "Hint":

Выбор по окончанию значения атрибута

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

Синтаксис:

Пример. Зададим стили для всех элементов img, которые ссылаются на гифки:

Выбор по подстроке в значении атрибута

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

Синтаксис:

Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "xiper.net":

Группировка

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

xiper.net

От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Селекторы атрибутов ссылаются на элементы по их атрибутам. Это может быть просто атрибут ([type]) или атрибут со значением ([type=checkbox] или [for=”email”]).

Также можно проверять наличие атрибута и вхождение подстроки в селекторы атрибутов. Например, значения атрибута можно перечислить через пробел, или же можно ссылаться на элемент, чье значение атрибута начинается на tel:. В атрибутах можно даже указывать значения с тире, например, en-US.

Некоторые из атрибутов, с которыми мы сегодня познакомимся, довольно старые. Значения с тире и значения через пробел в селекторах атрибутов были прописаны в CSS2. В спецификации Selectors Level 3 появилось несколько мощных селекторов, с помощью которых можно искать элементы по части значения атрибута.

В этой главе мы сосредоточимся на новых и малоизвестных селекторах атрибутов. Давайте начнем.

Проверка наличия атрибута

Искать элементы по точному значению атрибута – обычное дело. Стили для сброса обычно используют селекторы типа [type=text] и [type=email]. Но мы можем проверять атрибуты с несколькими значениями, разделенными пробелом. Для этого нужно воспользоваться селектором [att~=val].

Селектор атрибута со значениями, разделенными пробелом ищет элементы с атрибутом att и рядом значений, одно из которых val. Это может быть любой атрибут, принимающий значения, разделенные пробелом, в том числе class или data=*.

А вот несколько атрибутов, разделенных пробелом – редкость. Их иногда используют с атрибутом rel и микроформатами для описания связи между людьми и документами. Внешнюю ссылку можно записать следующим образом:

Для поиска этой ссылки и всех похожих можно использовать селектор атрибута с условием присутствия:

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

Поиск по значениям атрибута с дефисом

Одна из интереснейших задач, которую можно выполнять с помощью селекторов атрибутов, заключается в поиске элементов с помощью значений атрибутов с дефисом. Для этого необходимо использовать запись [attr|=val]. Этот селектор ищет элементы по атрибуту, в котором значение будет содержать дефис, а префикс будет равен val.

На первый взгляд селектор бесполезен. Однако его можно использовать с языками и кодами языков, en-US или es-MX.

Скажем, у нас есть сайт, нацеленный на англоязычную аудиторию. Наш сайт поддерживает две региональные вариации английского: британскую и американскую. Коды этих вариаций будут en-GB и en-US. В теге html мы задали язык, например, <html lang=»en-US»>.

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

Давайте сделаем французский текст курсивным и добавим подходящие кавычки (« и ») с обеих сторон:

Чем хорош этот селектор, так это тем, что он будет находить элементы, даже если атрибут равен префиксу. Стили выше применятся к

. Можно сузить область поиска для этих селекторов, например, добавив элемент p к атрибуту lang: p[lang|=»fr»].

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

Это превью статей или тизеры. Их связывают одинаковые визуальные характеристики и поведение, а также префикс articlepromo. Для поиска этих классов также можно использовать селектор атрибута с дефисом:

Отделите каждый раздел рамкой определенного цвета и получите что-то похожее на скриншот ниже.

Данный селектор можно использовать с id. Например, [id|=global] подходит под #global-footer, #global-menu и т.д.

Не стоит использовать что-то просто потому, что вы можете. Селектор атрибута со значением с дефисом идеально подходит для стилизации различных языков. Для всего остального проще использовать классы. Классы снижают незапланированные риски в больших проектах. Классы обязательны, если вам нужно поддерживать IE8, так как IE8 не поддерживает селекторы атрибутов с дефисом.

Поиск значений атрибутов по подстроке

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

Когда может помочь этот селектор? Вспомните о ссылках tel: и mailto:. Они ведут себя не так, как другие ссылки, поэтому и стилизовать их нужно по-другому, чтобы дать пользователю подсказку. Возьмем ссылку Call this business:

Найти эту и другие ссылки tel: можно с помощью ^=: [href^=»tel:»]. Добавим стили:

Результат показан на изображении ниже.

Для поиска элементов, чье значение атрибута заканчивается на подстроку, замените ^ на $. Если по какой-то странной причина – подчеркну, странной – мы захотим искать элемент по четырем последним цифрам телефона (5555), необходимо использовать код:

Намного удобнее искать элементы, заканчивающиеся на один суффикс. Например, можно одновременно найти <aside class=»sports-sidebar»> и <aside class=»arts-sidebar»> с помощью [class$=sidebar].

Однако $= не найдет класс sports-sidebar-a. Тут нам понадобится *=. И селектор изменится на [class*=sidebar].

В CSS3 и CSS4 новые селекторы по большей части не работают с атрибутами. Это псевдоклассы или псевдоэлементы. Их мы обсудим в следующих главах.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

webformyself.com

Введение

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

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

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

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

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

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

Выбор этого элемента будет выглядеть следующим образом:

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

Краткий обзор селекторов атрибутов:

• = значение атрибута эквивалентно определённым символам;
• $= значение атрибута оканчивается определенными символами;
• ^= значение атрибута начинается с определенных символов;
• *= значение атрибута содержит определенные символы.

Псевдоклассы селекторов

Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

Можно пойти дальше и выбирать любые атрибуты.

Например:

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

Этот подход освобождает от необходимости использования JavaScript.

Псевдокласс :first-of-type

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

Заключение

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

Перевод статьи “Advanced CSS Selectors you never knew about” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

  <h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

  h2[rel=friend] {  	/* woohoo! */  }

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel=external] Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен "friend". Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно "friend". Именно точное. Давайте посмотрим на другой пример:

  <h1 rel="external">Attribute Equals</h1>

  h1[rel=external] { color: red; }

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

  <a href="http://perishablepress.com">Jeff Starr</a>  <a href="http://davidwalsh.name">David Walsh</a>  <a href="http://accidentalninja.net/">Richard Felix</a>

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

  a[href=http://perishablepress.com] { color: red; }

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

  input[type=text] { padding: 3px; }  input[type=radio] { float: left; }

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

[rel*=external] Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, "*=" означает "заданное значение может находиться где угодно в значении указанного атрибута". Взгляните на следующий пример:

  <h1 rel="xxxexternalxxx">Attribute Contains</h1>

  h1[rel*=external] { color: red; }

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

  <div id="post_1"></div>  <div id="post_two"></div>  <div id="third_post"></div>

Вы можете подсветить все эти элементы следующим образом:

  div[id*=post] { color: red; }

[rel^=external] Атрибут начинается с заданного значения

  <h1 rel="external-link yep">Attribute Begins</h1>

  h1[rel^=external] { color: red; }

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

  a[href^=http://perishablepress.com] { color: red; }

[rel$=external] Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

  <h1 rel="friend external">Attribute Ends</h1>

  h1[rel$=external] { color: red; }

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

  a[href$=#], a[href$=?] { color: red; }

[rel~=external] Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать "~=";

  <h1 rel="friend external sandwich">Attribute Space Separated</h1>

  h1[rel~=external] { color: red; }

Вы можете подумать, почему бы нам не использовать в этом случае "*=" ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а "*=" — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel|=external] Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с "*=".

  <h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>

  h1[rel|=external] { color: red; }

[title=one][rel^=external] Соответствие по нескольким атрибутам

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

  <h1 rel="handsome" title="Important note">Multiple Attributes</h1>

  h1[rel=handsome][title^=Important] { color: red; }

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

www.css-tricks.ru

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

Простые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке

Селектор типа (1)  E (соответствует любому элементу типа E) — Мы можем использовать любой элемент HTML в селекторе.

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

Селектор класса (1)  .class (соответствует элементу с классом class) — любой набор стилей, который можно использовать для любых элементов, обладающих определенным классом.

Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.

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

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

Селекторы атрибутов были введены в CSS2 и расширены в CSS3.

E[foo]  (2) — соответствует элементу E с атрибутом “foo”.

Обе ссылки будут иметь зеленый цвет, так как содержат атрибут rel.

E[foo=»bar»] (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.

Только первая ссылка будет иметь зеленый цвет, так как только она обладает атрибутом rel со значением “external.”

E[foo~=»bar»] (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar».

Обе ссылки будут иметь зеленый цвет, так как обе имеют атрибут rel со значением friend в списке, разделенном пробелом.

E[foo^=»bar»]  (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.

Вторая ссылка имеет зеленый цвет, так как значение атрибута href у нее начинается со строки “my.”

E[foo$=»bar»] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar».

Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href  заканчивается строкой «php». Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.

E[foo*=»bar»] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.

Обе ссылки будут иметь зеленый цвет, так как значение атрибута href содержит строку “page”.

E[foo|=»en»] (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.

Только вторая ссылка будет иметь зеленый цвет, так как значение ее атрибута начинается с “internal.”

Множественный селектор атрибутов

Можно объединять несколько селекторов атрибутов вместе:

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

Атрибуты или классы и идентификаторы?

Каково же преимущество использования атрибутов перед классами и идентификаторами?

Если добавлять атрибут специально для использования селектора, то преимуществ нет.

Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто — атрибут title. Изображения всегда имеют атрибут alt. Элементы формы используют атрибут type. В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?

Кроме того, HTML5 имеет новый атрибут — data, который также может нести двойную нагрузку.

Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.

ruseller.com

Стиль элементов HTML с определенными атрибутами

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

CSS Селектор [атрибут]

Селектор [атрибут] используется для выбора элементов с заданным атрибутом.

В следующем примере выбираются все элементы <a> с атрибутом [target]:

CSS Селектор [атрибут="значение"]

Селектор [attribute="value"] используется для выбора элементов с заданным атрибутом и значением.

В следующем примере выбираются все элементы <a> с атрибутом target="_blank":

CSS Селектор [атрибут~="значение"]

Селектор [attribute~="value"] селектор используется для выбора элементов с атрибутом и значением, содержащее указанное слово.

В следующем примере выбираются все элементы с атрибутом title, которые содержит разделенный пробелами список слов, одно из которых "flower":

Пример выше будет соответствовать элементам с title=»flower», title=»summer flower», и title=»flower new», но не title=»my-flower» или title=»flowers».

CSS Селектор [атрибут|="значение"]

Селектор [attribute|="value"] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.

В следующем примере выбираются все элементы со значением атрибута класса, начинающимся с "top":

Примечание: Значение должно быть целым словом, либо в одиночку, как class="top", или через дефис ( — ), как class="top-text"! 

CSS Селектор [атрибут^="значение"]

Селектор [attribute^="value"] используется для выбора элементов, атрибут значение которых начинается с указанного значения.

В следующем примере выбираются все элементы со значением атрибута класса, начинающимся с "top":

Примечание: Значение не обязательно должно быть целым словом!

CSS Селектор [атрибут$="значение"]

Селектор [attribute$="value"] используется для выбора элементов, атрибут которых значение заканчивается указанным значением.

В следующем примере выбираются все элементы со значением атрибута класса, которые заканчивается на "test":

Примечание: Значение не обязательно должно быть целым словом!

CSS Селектор [атрибут*="значение"]

Селектор [attribute*="value"] используется для выбора элементов, атрибут которых значение содержит указанное значение.

В следующем примере выбираются все элементы со значением атрибута класса, которые содержит "te":

Примечание: Значение не обязательно должно быть целым словом!

Стили Формы

Селекторы атрибутов могут быть полезны для стилизации форм без класса или ID:

Совет: Посетите наш CSS Учебник Форм дополнительные примеры стилизации форм с помощью CSS.

Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »  Упражнение 5 »  Упражнение 6 »

Больше примеров CSS Селекторов

Используйте наш CSS Тестер Селекторов демонстрация различных селекторов.

Полный справочник селекторов CSS, пожалуйста, перейдите на наш CSS Справочник Селекторов.

schoolsw3.com