Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Селектор атрибута – Attribute selectors — Web technology for developers

Содержание

Селекторы атрибутов | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

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

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

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

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

htmlbook.ru

Селекторы атрибутов | Учебные курсы

Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов <input>. Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.

Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.

Селектор [attribute]

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

[title] { border-bottom: 1px dotted blue; }

Здесь для всех элементов, к которым добавляется атрибут title, задаётся нижнее точечное подчёркивание синего цвета.

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

a[target] { font-weight: bold; }

В данном случае выбираются только элементы <a>, к которым добавлен атрибут target с произвольным значением.

В примере 1 показано изменение стиля элемента <textarea>, когда к нему добавляется атрибут readonly.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   textarea {
    height: 100px; /* Высота поля */
   }
   textarea[readonly] {
    background: #f0f0f0; /* Цвет фона */
    opacity: 0.8; /* Значение прозрачности */
   }
  </style>
 </head>
 <body>
  <textarea>Это обычное текстовое поле, его можно редактировать.</textarea>
  <textarea readonly>Это текстовое поле только для чтения, вы не можете его изменить.</textarea>
 </body>
</html>

В данном примере селектор textarea устанавливает стиль для всех элементов <textarea>, а селектор textarea[readonly] для элементов <textarea>, к которым добавлен атрибут readonly. Результат примера показан на рис. 1.

Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly

Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для <input> атрибут type по умолчанию равен text, но селектор input[type] будет работать для <input type=»text»> и не будет для <input>, хотя сами элементы отображаются одинаково.

Селектор [attribute=»value»]

Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для <input>, у которого значение type равно checkbox, селектор запишется следующим образом.

input[type="checkbox"] { width: 20px; height: 20px; }

Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.

Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.

В примере 2 показано как установить стиль для элемента <input>, основываясь на его значении.

Пример 2. Изменение поля формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   input[type="number"] {
    border: 1px solid red; /* Параметры рамки */
    border-radius: 4px; /* Радиус скругления */
    width: 3em; /* Ширина */
    padding: 5px; /* Поля */
   }
  </style>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="name"></p>
   <p>Возраст: <input type="number" name="age" value="18"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

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

Рис. 2. Изменение стиля элемента в зависимости от значения атрибута

Селекторы атрибутов можно применять вместо классов, поскольку [class=»block»] и .block выберут одни и те же элементы.

Селектор [attribute^=»value»]

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

[class^="view"] { color: red; }

При этом будут выделены элементы с классом view, view-block, viewer, но не block-view.

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

Пример 3. Изменение стиля ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href^="http://"] { 
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body> 
  <p><a href="page/new.html">Обычная ссылка</a> | 
  <a href="http://ya.ru">Ссылка на ya.ru</a> |
  <a href="http://google.ru">Ссылка на google.ru</a></p> 
 </body>
</html>

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

Рис. 3. Изменение стиля ссылок

Селектор [attribute*=»value»]

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

[class*="view"] { color: red; }

При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

Пример 4. Стиль для сайта GitHub

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href*="github"] { /* Ссылка содержит github */
    background: url(/example/image/if_GitHub.png) no-repeat 100% 50%; /* Добавляем фоновый рисунок */ 
    padding-right: 24px; /* Смещаем текст влево */
   } 
  </style>
 </head>
 <body> 
  <p><a href="https://ya.ru">Яндекс</a> | 
   <a href="https://github.com">GitHub</a></p>
 </body>
</html>

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

Рис. 4. Изменение стиля ссылки

Селектор [attribute$=»value»]

Устанавливает стиль для элемента, когда значение атрибута оканчивается указанным текстом. К примеру, для выбора всех элементов, у которых класс завершается view, используется следующая запись.

[class$="view"] { color: red; }

При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href$=".ru"] { /* Ссылка оканчивается на .ru */
    background: url(/example/image/ru.png) no-repeat 0 50%; /* Добавляем фоновый рисунок */ 
    padding-left: 18px; /* Смещаем текст вправо */ 
   } 
   a[href$=".com"] { /* Ссылка оканчивается на .com */
    background: url(/example/image/com.png) no-repeat 0 50%; 
    padding-left: 18px;
   }
  </style>
 </head>
 <body> 
  <p><a href="//ya.ru">Яндекс</a> | 
   <a href="//google.com">Google</a></p> 
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

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

Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента <input>, у которого есть атрибут type со значением password и атрибут required, запись будет следующей.

input[type="password"][required] { border: 1px solid red; }

Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.

Перейти к заданиям

webref.ru

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

Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тега по присутствию определенного параметра или его значения. Замечание: селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>. Рассмотрим несколько типичных вариантов применения таких селекторов.

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

Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Пробел между именем селектора и квадратными скобками не допускается. В примере 12.1 показано изменение стиля тега , в том случае, если к нему добавлен параметр title. Пример 12.1. Вид элемента в зависимости от его параметра
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; 
    quotes: "\00AB" "\00BB"; 
   }
   Q[title] {
    color: maroon; 
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюсона-Мержевича">После
  того, как веб-страница будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Результат примера показан на рис. 12.1 В данном примере меняется цвет текста внутри контейнера 7lt;Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять атрибуты, поскольку они наследуются от селектора Q.

Селектор атрибута со значением

Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.
 
 
[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором — только к определенным селекторам. В примере 12.2 показано изменение стиля ссылки в том случае, если тег A содержит параметр target="_blank". При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки. Пример 12.2. Стиль для открытия ссылок в новом окне
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] {
    background: url(blank.gif) no-repeat 0 2px; 
    padding-left: 15px; 
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Результат примера показан ниже (рис. 12.2). В данном примере рисунок к ссылке добавляется с помощью атрибута background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через аргумент no-repeat, что в итоге даст единственное изображение.

Атрибут начинается с определенного значения

Устанавливает стиль для элемента в том случае, если атрибут начинается с указанного значения. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля } Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые начинаются с заданного значения атрибута. А во втором — только к определенным селекторам. Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу A новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 12.3. Пример 12.3. Изменение стиля внешней ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] {
    font-weight: bold; 
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя ссылка на сайт htmlbook.ru</a></p>
 </body>
</html>
Результат примера показан ниже (рис. 12.3) В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 12.2 приемом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведет на другой сайт.

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

Устанавливает стиль для элемента в том случае, если атрибут оканчивается указанным значением. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля } Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые завершаются заданным значением атрибута. А во втором — только к определенным селекторам. Таким способом можно автоматически разделять стиль для сайтов домена ru и для сайтов других доменов вроде com, как показано в примере 12.4. Пример 12.4. Стиль для разных доменов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { 
    background: url(ru.gif) no-repeat; 
    padding-left: 10px; 
   }
   A[href$=".com"] { 
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> |
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется свой фоновый рисунок. Стилевые атрибуты будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться не будет. В этом случае лучше воспользоваться селектором, в котором определенное значение может находиться в любом месте атрибута.

Значение встречается в любом месте атрибута

Возможны варианты, когда стиль следует применить к селектору с определенным атрибутом, частью которого является некоторое значение. При этом точно не известно, начинается или заканчивается этим значением аргумент. Тогда следует использовать следующий синтаксис.
[атрибут*="значение"] { Описание правил стиля } Селектор[атрибут*="значение"] { Описание правил стиля }
Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере 12.5 показано изменение стиля ссылок, в которых встречается слово «htmlbook». Пример 12.5. Стиль для разных сайтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] {
    background: yellow; 
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Теги HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Результат данного примера показан на рис. 12.4 Существуют и некоторые другие виды селекторов аргументов, но они применяются достаточно редко, поэтому их описание мы опустим. Ссылка на первоисточник: http://stepbystep.htmlbook.ru/?id=54

javarush.ru

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

CSS селекторы

Значение и применение

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

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

CSS синтаксис:

[attribute$ = value] {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

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

Давайте рассмотрим пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>

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

Результат нашего примера:

Пример использования селектора атрибутов со значением, заканчивающимся определёнными символами.CSS селекторы

basicweb.ru

Селектор атрибута (с указанным значением)

CSS селекторы

Значение и применение

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

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

CSS синтаксис:

[attribute = value] {
блок объявлений;
}

Версия CSS

CSS2

Пример использования

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 
input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

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

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвигающийся поиск на CSS</title>
<style> 
input[type=text] {
width : 20%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") */
transition : width 500ms ease-in-out; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 500 ms, при этом эффект перехода начинается с медленного старта и заканчивается медленно (ease-in-out) */
}

 
input[type=text]:focus {
width : 40%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") при получении фокуса */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>
Выдвигающийся поиск на css (универсальное свойство transition и селектор атрибутов).CSS селекторы

basicweb.ru

seodon.ru | Учебник CSS — Селекторы атрибутов

Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

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

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

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

    [атрибут] { свойство: значение; … }

  2. Чтобы стили применились к элементам имеющим не просто определенный атрибут, а атрибут с конкретным значением — надо после атрибута написать знак равно (=) и это значение, которое можно взять в кавычки.

    [атрибут=»значение»] { свойство: значение; … }

  3. Некоторые атрибуты могут иметь сразу несколько разделенных пробелом значений (например, атрибут rel тега <A> или class, который мы рассмотрим чуть позже). Так вот, чтобы задать стили элементам, у которых одно из значений в атрибутах одинаковое, надо после атрибута поставить знаки ~= (приблизительно равно), а затем написать необходимое значение.

    [атрибут~=»значение»] { свойство: значение; … }

  4. Четвертый вариант предназначен для атрибутов, у которых значение может состоять из нескольких слов разделенных дефисом (допустим, то же class). И он позволяет применить стили ко всем элементам, у которых первое слово в значении атрибутов — одинаковое. Например, и. Здесь одинаковая часть — block, поэтому ее и можно использовать в качестве значения.

    [атрибут|=»значение»] { свойство: значение; … }

  5. Пятый способ подключает стили к элементам, у которых значения атрибутов начинаются с одинакового текста. Например, src=»images/bird.png» и src=»images/cat.jpg». Здесь одинаковая часть images/ или images или image и т.д. Именно эта одинаковая часть и записывается в качестве значения.

    [атрибут^=»значение»] { свойство: значение; … }

  6. Аналогичен пятому, но здесь выборка идет по части текста, которым наоборот заканчиваются значения атрибутов. Допустим, src=»image/bird.png» и src=»picture/dog.png». Понятно, что здесь одинаковая часть .png.

    [атрибут$=»значение»] { свойство: значение; … }

  7. Если необходимо выделить элементы, у которых значения атрибутов имеют одинаковую часть текста, причем неважно в каком месте значения, то используется данный способ. Например, href=»http://seodon.ru/css/» и href=»http://www.seodon.ru/html/». Здесь одинаковая часть «seodon.ru». Таким образом, допустим, можно выделить все ссылки ведущие на определенный сайт.

    [атрибут*=»значение»] { свойство: значение; … }

К сожалению, Internet Explorer 6.0 вообще не понимает селекторы атрибутов.

Пример использования селекторов атрибутов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href] {
    text-decoration: none; /* убираем подчеркивание у элементов с атрибутом href */
    font-weight: bold; /* увеличиваем жирность шрифта */
   }
   [href^="http://seodon.ru"] {
    color: red; /* красный цвет текста */
   }
   [href^="http://spravka.seodon.ru"] {
    color: blue; /* синий цвет текста */
   }
  </style>
 </head>
 <body>
  <p><a href="http://seodon.ru/html/">HTML для начинающих</a></p>
  <p><a href="http://seodon.ru/css/">CSS для новичков</a></p>
  <p><a href="http://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
 </body>
</html>

Результат в браузере

Объединение селекторов атрибутов

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

[селектор атрибутов1][селектор атрибутов2] { свойство: значение; … }

селектор[селектор атрибутов] { свойство: значение; … }

селектор[селектор атрибутов1][селектор атрибутов2] { свойство: значение; … }

Пример объединения селекторов атрибутов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение селекторов атрибутов</title>
  <style type="text/css">
   img[alt] {
    border: 3px red solid; /* стили рамки картинок с alt */
   }
   [alt][title] {
    border: 3px green solid; /* стили рамок элементов с title и alt */
   }
  </style>
 </head>
 <body>
  <p>
   <img src="http://seodon.ru/image/cat.png" alt="Кошка">
   <img src="http://seodon.ru/image/dog.png" alt="Собака" title="Собака">
  </p>
 </body>
</html>

Результат в браузере

Обратите внимание, что в этом примере первый селектор устанавливает рамку только для всех тегов <IMG>, у которых есть атрибут alt. А вот второй селектор задает стили рамки уже не только для обычных картинок, но и вообще для всех элементов страницы имеющих атрибуты alt и title.

Домашнее задание.

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

  1. Сделайте так, чтобы любые абсолютные ссылки на вашей страничке выводились жирным шрифтом без подчеркивания. Для этого вам понадобятся свойства font-weight и text-decoration.
  2. Сделайте две относительные ссылки и по две абсолютные, ведущие на поисковики Яндекс и Google. Пусть ссылки ведущие на Яндекс будут красного цвета, на Google — зеленого, а остальные — синего. Используйте свойство color.

Посмотреть результат → Посмотреть ответ

seodon.ru

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

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

Последнее обновление: 21.04.2016

Кроме селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:


input[type="text"]{
	
	border: 2px solid red;
}

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

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			input[type="text"]{
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" /></p>
		<p><input type="password" /></p>
		<input type="submit" value="Send" />
    </body>
</html>

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			.link[href="http://apple.com"]{
			
				color: red;
			}
        </style>
    </head>
    <body>
        <a href="http://microsoft.com">Microsoft</a> | 
		<a href="https://google.com">Google</a> | 
		<a href="http://apple.com">Apple</a>
    </body>
</html>

Специальные символы позволяют конкретизировать значение атрибутов. Например символ ^ позволяет выбрать все атрибуты, которые начинаются на определенный текст. Например, нам надо выбрать все ссылки, которые используют протокол https, то есть ссылка должна начинаться на «https://». В этом случае можно применить следующий селектор:


a[href^="https://"]{
			
	color: red;
}

Если значение атрибута должно иметь в конце определенный текст, то для проверки используется символ $. Например, нам надо выбрать все изображения в формате jpg. В этом случае мы можем проверить, оканчивается ли значение атрибута src на текст «.jpg»:


img[src$=".jpg"]{
			
	width: 100px;
}

И еще один символ «*» (звездочка) позволяет выбрать все элементы с атрибутами, которые в своем значении имеют определенный текст (не важно где — в начале, середине или конце):


a[href*="microsoft"]{
			
	color: red;
}

Данный атрибут выберет все ссылки, которые в своем адресе имеют текст «microsoft».

metanit.com

Оставить комментарий

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

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