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

Селекторы псевдо-элементов

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент ::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия — «::»:

  p::first-letter { font-size: 120%; }  

Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу ::selection, который был добавлен в CSS3.

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

Псевдо-элемент ::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент <span> и применить стиль к нему:

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>  	 .firstletter {  	 font-size: 150%;  		font-weight: bold;  	 }   </style>   </head>   <body>   <p><span class="firstletter">Н</span>аш текст</p>   </body>  </html>  

Попробовать »

Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента ::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>  	 p::first-letter {  	 font-size: 150%;  		font-weight: bold;  	 }   </style>   </head>   <body>   <p>Наш текст</p>   </body>  </html>  

Попробовать »

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

Псевдо-элемент ::first-line применяет стиль к первой строке текста в элементе:

  p { width: 200px; }  p::first-line { color: blue; }  

Попробовать »

Особенность псевдо-элемента ::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.

Псевдо-элементы ::before и ::after

Для добавления генерируемого содержимого в документ используются псевдо-элементы ::before и ::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.

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

  a {    text-decoration: none;   color: black;  }  a::before { content: url("link.png"); }  

Попробовать »

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

Селекторы атрибутов поддерживаются всеми современными браузерами (исключение составляет IE6, хотя его уже нельзя отнести к современным браузерам, стоит учитывать тот факт, что некоторые пользователи все еще его используют. Поэтому, если вам необходимо написать код, одинаково хорошо работающий во всех браузерах, включая IE6, то советуем вам воздержаться от использования селекторов атрибутов).

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

  img[alt] { border: 1px solid red; }  

В примере, приведенном выше, правило будет применяться ко всем элементам <img>, имеющим атрибут alt. Но помимо простой выборки элементов по атрибутам, селекторы атрибутов позволяют выбирать элементы исходя из значения атрибута:

  • элемент[атрибут^=»значение»] — селектор атрибута с совпадением по подстроке. Оператор ^= означает «начинается с …».
  • элемент[атрибут$=»значение»] — селектор атрибута с совпадением по подстроке. Оператор $= означает «заканчивается на …».
  • элемент[атрибут*=»значение»] — селектор атрибута с совпадением по подстроке. Оператор *= означает «содержит подстроку …».

В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением .pdf:

  a[href^="http:"] {   padding-left: 20px;   background-image: url("img1.png");   background-repeat: no-repeat;  }  a[href^="mailto:"] {   padding-left: 20px;   background-image: url("img2.png");   background-repeat: no-repeat;  }  a[href$=".pdf"] {   padding-left: 20px;   background-image: url("img3.png");   background-repeat: no-repeat;  }  

Попробовать »

В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.

puzzleweb.ru

Как выбрать элемент по его html-атрибуту

Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Сразу приведу несколько примеров, чтобы было понятно:
*[href] – выбирает все элементы, которые имеют атрибут href с любым значением.
input[disable] – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input[type = "password"] – выбирает все поля, тип которых password, то есть поля для ввода пароля.
img[src = "logo.png"] – выбирает картинку, у которой задан атрибут src = "logo.png".

Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.

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

Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div[class^= "block"] – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block". Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote". Главное, чтобы в начале значения было ключевое слово.

Поиск в конце строки
A[href$= ".rar"] – выбирает все ссылки, у которых адрес заканчивается на .rar. Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.

Поиск подстроки везде в значении
span[class*= "art"] – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.

Поиск префиксов
p[class|= "first"] – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first-, с которого начинается имя класса.

Поиск слов внутри значения
input[id~= “text”] – выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text. Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.

Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.

Для чего могут пригодиться селекторы атрибутов

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

Реализовать это можно так:

a[href^= "http://ru.wikipedia.org/"] {css-правила}

Так мы выбрали все ссылки, адрес который начинается с http://ru.wikipedia.org/ то есть по сути все ссылки на русскоязычную википедию.

На самом деле способов применения селекторов атрибутов можно придумать еще много. Они могут в какой-то мере упростить работу там, где это нужно. Используйте css и подписывайтесь на блог, чтобы узнавать больше о веб-разработке.

dolinacoda.ru

Простой селектор атрибута

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

[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }

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

В примере 13.1 показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title.

Пример 13.1. Вид элемента в зависимости от его атрибута

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Селекторы атрибутов</title>  <style>  Q {  font-style: italic; /* Курсивное начертание */  quotes: "0AB" "0BB"; /* Меняем вид кавычек в цитате */  }  Q[title] {  color: maroon; /* Цвет текста */  }  </style>  </head>  <body>   <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:   <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница   будет корректно отображаться в одном браузере, выяснится,   что она неправильно показывается в другом</q>.</p>   </body> </html>

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

Изменение стиля элемента в зависимости от применения атрибута title

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

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

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.

[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Селекторы атрибутов</title>  <style>  A[target="_blank"] {   background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */  padding-left: 15px; /* Смещаем текст вправо */  }  </style>  </head>  <body>  <p><a href="1.html">Обычная ссылка</a> |   <a href="link2" target="_blank">Ссылка в новом окне</a></p>  </body> </html>

Результат примера показан ниже (рис. 13.2).

Изменение стиля элемента в зависимости от значения target

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

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

Значение атрибута начинается с определённого текста

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

[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Селекторы атрибутов</title>  <style>  A[href^="http://"] {   font-weight: bold /* Жирное начертание */  }  </style>  </head>  <body>    <p><a href="1.html">Обычная ссылка</a> |   <a href="http://htmlbook.ru" target="_blank">Внешняя   ссылка на сайт htmlbook.ru</a></p>    </body> </html>

Результат примера показан ниже (рис. 13.3).

Рис. 13.3

Рис. 13.3. Изменение стиля для внешних ссылок

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

Значение атрибута оканчивается определённым текстом

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

[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }

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

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

Пример 13.4. Стиль для разных доменов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Селекторы атрибутов</title>  <style>  A[href$=".ru"] { /* Если ссылка заканчивается на .ru */  background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */   padding-left: 12px; /* Смещаем текст вправо */   }   A[href$=".com"] { /* Если ссылка заканчивается на .com */  background: url(images/com.png) no-repeat 0 6px;   padding-left: 12px;  }  </style>  </head>  <body>    <p><a href="http://www.yandex.com">Yandex.Com</a> |   <a href="http://www.yandex.ru">Yandex.Ru</a></p>    </body> </html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4

Рис. 13.4. Добавление картинки к ссылкам

Значение атрибута содержит указанный текст

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

[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }

В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Селекторы атрибутов</title>  <style>  [href*="htmlbook"] {   background: yellow; /* Желтый цвет фона */  }  </style>  </head>  <body>  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |   <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |   <a href="http://webimg.ru">Графика для Веб</a></p>  </body> </html>

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

Рис. 13.5

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

[атрибут~="значение"] { Описание правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля }

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

Пример 13.6. Стиль в зависимости от имени класса

HTML5CSS 2.1IECrOpSa 5Fx

<!DOCTYPE HTML>  <html>   <head>   <meta charset="utf-8">   <title>Блок</title>   <style>   [class~="block"] h3 { color: green; }   </style>   </head>   <body>   <div class="block tag">   <h3>Заголовок</h3>   </div>   </body>  </html>

В данном примере зелёный цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

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

[атрибут|="значение"] { Описание правил стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> <html>  <head>  <meta charset="utf-8">  <title>Блок</title>  <style>  DIV[class|="block"] {  background: #306589; /* Цвет фона */  color: #acdb4c; /* Цвет текста */  padding: 5px; /* Поля */  }  DIV[class|="block"] A {  color: #fff; /* Цвет ссылок */  }  </style>  </head>  <body>  <div class="block-menu-therm">  <h2>Термины</h2>  <div class="content">  <ul class="menu">  <li><a href="t1.html">Буквица</a></li>  <li><a href="t2.html">Выворотка</a></li>  <li><a href="t3.html">Выключка</a></li>  <li><a href="t4.html">Интерлиньяж</a></li>  <li><a href="t5.html">Капитель</a></li>  <li><a href="t6.html">Начертание</a></li>  <li><a href="t7.html">Отбивка</a></li>  </ul>  </div>  </div>  </body> </html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

  1. INPUT[type="text"] { background: #acdacc; }
  2. INPUT[type="textinput"] { background: #acdacc; }
  3. INPUT[type="textfield"] { background: #acdacc; }
  4. INPUT[type="textarea"] { background: #acdacc; }
  5. INPUT[type="texts"] { background: #acdacc; }

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

<p class="text text1-count1-text">Первый абзац</p>
<p class="text text2-count2-text">Второй абзац</p>
<p class="text text3-count3-text">Третий абзац</p>

  1. P[class|="text2"] { color: red; }
  2. P[class^="text2"] { color: red; }
  3. P[class~="text2"] { color: red; }
  4. P[class*="text2"] { color: red; }
  5. P[class$="text2"] { color: red; }

3. К какому элементу будет применяться следующий стиль?

[class~="lorem"] { background: #666; }

  1. <p class="lorem-ipsum">Lorem ipsum dolor sit amet</p>
  2. <div class="lorem-ipsum dolor">Lorem ipsum dolor sit amet</div>
  3. <p class="ipsum-lorem">Lorem ipsum dolor sit amet</p>
  4. <div class="lorem ipsum">Lorem ipsum dolor sit amet</div>
  5. <p><span class="1orem ipsum">Lorem ipsum dolor sit amet</span></p>

Ответы

1. INPUT[type="text"] { background: #acdacc; }

2. P[class*="text2"] { color: red; }

3. <div class="lorem ipsum">Lorem ipsum dolor sit amet</div>

htmlbook.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.