Значение в квадратных скобках css3. CSS: Псевдо-элементы и селекторы атрибутов. Css3 селекторы и псевдоклассы

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

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
color:red;
font-size:150%;
}
...

Наш телефон: 777-77-77

Наш адрес: Москва ул. Советская 5

Получиться следующий результат:

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

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

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

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

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

{
color:red;
font-size:150%;
}
...

• Пункт 1


• Пункт 2


• Пункт 3


• Пункт 4

Результат:

В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „ .

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

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a{
color:green;
font-weight:bold;
}
...

Результат:

В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http:// .

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

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

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG {
border: 5px solid red;
}
...

Картинка формата gif

Картинка формата png

Результат:

В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.

7. Значение атрибута содержит указанную строку

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

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG {
border: 5px solid red;
}
...

Картинка из папки gallery

Картинка из другой папки

Результат:

В примере стиль применяется к картинкам, которые загружены из папки «gallery» .

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

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

Кроме того напомню о специальных селекторах CSS:

• с помощью символов «+» и «~» формируются ;
• символ «>» привязывает css стили к дочерним тегам;
• символ <пробел> формирует контекстные селекторы.

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

На этом все, до новых встреч.

Здравствуйте, уважаемы читатели! В сегодняшней публикации мы продолжим изучение основ CSS и я предложу Вам описание различных вариаций селекторов атрибутов , причем теоретические выкладки можно будет подкреплять практическими действиями, используя встроенные инструменты всех популярных браузеров ( - о понятии browser и сравнение лучших web-обозревателей), например, о котором я подробно писал.

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

Было сделано еще немало полезного, обо всех предпринятых мной шагах обязательно подробно расскажу в ближайших публикациях. Ну, и в-третьих, получил позитивный заряд, тесно пообщавшись с друзьями и родными во время рождественских и новогодних праздников. Кстати, пользуясь случаем, хочу пожелать всем читателям блога здоровья, успехов, любви и семейного благополучия в Новом Году! Такие пожелания никогда не бывают запоздалыми, если идут от чистого сердца.

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

Перед тем, как начать изложение материала, еще раз хочу напомнить, что темы и объем статей очень тщательно мной проработаны и ориентированы прежде всего на начинающих. Но не исключаю, что и опытные вебмастера найдут для себя толику чего-то полезного. Поэтому те, кто в дальнейшем хочет сэкономить средства и время при редактировании или даже создании с “нуля” своего вебсайта, ни в коем случае не должны пренебрегать изучением стилей CSS, тем более, что я пытаюсь излагать материалы ясно, доступно, и, вместе с тем, компактно.

Надеюсь, вы простили мне это небольшое отступление, оно было важным и совершенно к месту, я в этом уверен. Теперь возвращаюсь к нашим баранам, то бишь селекторам атрибутов, многочисленные вариации которых подробно представлю ниже. Однако, для начала нужно провести некоторые приготовления, поскольку урок будет объемным и, что самое важное, вы сразу после каждого пункта теории сможете проверить все на практике прямо по ходу статьи. Заинтриговал?

На самом деле, все просто. Современное развитие web-технологий позволяет делать подобные вещи легко и просто. Я имею ввиду использование такого инструмента как, например, Firebug для Firefox, о котором я упомянул в начале поста. Однако, я написал уже о нем достаточно подробно, поэтому в этой статье буду использовать аналогичный инструмент для другого популярного браузера Google Chrome ( о нем подробнее).

Этот инструмент уже встроен изначально в последних версиях Хрома. Кстати, подобные встроенные расширения имеют все наиболее популярные браузеры, включая и Opera (как ). Итак, для начала открываем любую страницу любого ресурса (можно своего сайта) в Google Chrome (желательно, чтобы это была последняя версия).

Выделяем какой-нибудь элемент на вебстранице (для примера я выделю один из абзацев сегодняшней статьи) и кликаем правой кнопкой мыши. Из контекстного меню выбираем “Просмотр кода элемента” (альтернативой является простое нажатие клавиши F12 на клавиатуре). В нижней части появится окно, подобное окну Firebug, в левой части которого будет находиться , справа - стили CSS.

По моему мнению, самым наглядным примером для проработки селекторов атрибута с разными вариациями является и атрибут title (не путать с тегом title), который определяет содержание всплывающей подсказки . Если вы читали , то представляете себе роль тега div , который является основным строительным материалом современных сайтов.

Если желаете, можете поочередно открыть контейнеры div, нажимая на расположенный слева черный треугольный значок, пока не доберетесь до тегов p , содержание которых отображается на странице в виде текста, разделенного на параграфы (или абзацы, что одно и то же).

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

В этом окне для редактирования составим три абзаца, применив к тегу p атрибут title, который вызывает всплывающую подсказку. Например, так:

1. Абзац (или параграф, что одно и то же, напоминаю), описывающий сроки обновления WordPress:

2. Параграф, дающий информацию о расширениях (плагинах):

3. Параграф о продолжительном отсутствии обновлений плагинов:

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

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

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

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

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

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

Как вы понимаете, свойства CSS для каждого элемента, в том числе тега абзаца p, задаются в документе style.css. Еще раз напоминаю, что для практического закрепления теории мы используем великолепный инструмент html и CSS редактирования, где в левой части окна добавили три абзаца, каждый со своим значением title.

Изменения в коды html и CSS мы вносим “на лету” на любой странице абсолютно любого ресурса (можете использовать одну из страниц моего блога, если так будет удобнее). В этом и преимущество подобных инструментов, которыми обладают все популярные браузеры, что даже человек, не имеющий своего сайта, может поэкспериментировать и получить необходимую практику.

Итак, после добавления абзацев их текст должен отобразиться на вебстранице (только не перезагружайте страницу во время практического занятия, иначе результаты сделанных вами изменений исчезнут). Далее необходимо прописать CSS правило для простого селектора. Для этого в правой части вебмастерского инструмента кликаем по ссылке, которая ведет к документу со стилями CSS (например, файл style.css):

Пропишем правило CSS для простого селектора атрибута следующим образом:

P { color: green; }

Внесем его прямо в конец файла style.css в окне редактирования инструмента разработчика:

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

как уже было сказано, значение title в данном случае неважно, поскольку не отмечено в правиле CSS. Далее. Применим теперь селектор атрибута со значением и посмотрим, как изменится текст всех трех подопытных параграфов. Синтаксис написания CSS правила в этом случае будет таким:

Для этого допишем к title значение:

P { color: green; }

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

Ниже рассмотрим еще несколько вариантов использования селектора атрибута.

Селектор атрибута со значением, содержащим указанный текст и одно из нескольких значений атрибута

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

Оператор «*» означает, что если в значении атрибута находится определенное слово или его часть, причем совершенно неважно, в каком месте (в начале, середине или конце), то к тегу с этим атрибутом и будет применено данное правило стилей. Продолжим практические изыскания. Напомню содержания трех параграфов и значения title для каждого из них:

Новая версия WordPress выйдет не позднее апреля 2013 года.

Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.

Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.

Составим в соответствии с представленным выше синтаксисом правило стилей (можно заменить на него ранее прописанное там же, в левой части окна используемого нами инструмента:

P { color: green; }

Сразу после редактирования можете наблюдать, что текст всех абзацев станет зеленым, поскольку в значении атрибута title каждого из них присутствует «Word» как часть слова «Wordpress».

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

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

Чтобы применить особый стиль в отношении одного из значений атрибута, разделенных пробелом , можно использовать оператор «~»; синтаксис написания будет следующий:

Применительно к тем же абзацам, которые рассматриваем в сегодняшней публикации, определим следующее стилевое правило, указав в значении атрибута слово «Wordpress»:

P { color: green; }

Теперь текст первого и третьего параграфа окрасится в зеленый цвет, потому что только для этих абзацев в значении атрибута title встречается слово «Wordpress», отделенное от остального текста пробелом. Текст второго параграфа остался таким же. Почему, ведь в значении title тоже есть WordPress? Да потому что это слово в значении title для второго абзаца разделено не пробелом, а знаком дефиса «-».

Итак, мы уяснили, что действия оператора «~» распространяются на фрагмент текста, разделенный пробелом. То есть, на одно из нескольких значений того или иного атрибута, которые отделены друг от друга пробелами. В нашем случае при использовании атрибута title значения, отделенные пробелами, и есть отдельные слова в значении title.

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

Селекторы CSS: значение атрибута начинается с определенного текста, заканчивается определенным текстом и дефис в значении атрибута

Двигаемся дальше в рамках нашего теоретическо-практического занятия, посвященного CSS селекторам атрибута . Поскольку пост получается достаточно объемным, еще раз напомню, что мы рассматриваем пример с тремя абзацами, образованными с помощью тега p и атрибута title (всплывающая подсказка) прямо в поле инструмента для онлайн редактирования браузера Google Chrome. Этот инструмент вызывается, в частности, простым нажатием клавиши F12.

Новая версия WordPress выйдет не позднее апреля 2013 года.

Плагин WordPress One Seo Pack приобрел дополнительные функции, с которыми можно ознакомиться на официальном сайте.

Плагин WP Tuner не обновлялся уже более года, поэтому его дальнейшее использование нецелесообразно.

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

Все эти тонкости в использовании различных вариантов значений атрибутов позволяют создать действительно гибкую систему для оформления странниц web-сайта. Сейчас взглянем на воздействие оператора «^», который указывает на то, что в значении атрибута присутствует текст или слово, с которого начинается значение атрибута данного тега. Немного запутались? Сейчас все поймете. Прежде дам синтаксис написания стилевого правила, когда значение атрибута начинается с определенного текста:

Следующим шагом пишем новое правило CSS опять же применительно к нашим подопытным абзацам:

P { color: green; }

Опять же в режиме онлайн при использовании инструмента для редактирования html и CSS кода видим, что на этот раз текст первого и второго абзацев приобрел зеленый оттенок, а текст третьего сохранил стилевое оформление обычного параграфа:

Это произошло потому, что значение атрибута title обоих первых параграфов начинается со слова «Wordpress». В значении title третьего параграфа это слово также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не смотря на свою гибкость и разнообразие селекторы атрибутов в CSS применяются довольно редко. Хотя их применение даёт большие возможности для веб-разработчиков. Они позволяют изменить свойства элемента с заданным атрибутом и более того с определенным значением. В зависимости от результата, который хотелось бы получить, для селекторов атрибутов применяют разный синтаксис.

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

Применяется для установления стиля атрибута, если значение атрибута не играет никакой роли. И имеет следующий синтаксис:

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

В качестве примера попробуйте например прописать в таблице стилей вот такую вот строчку:

P { color: red; /* Цвет текста */ }

Цвет текста поменяется лишь в том случае, когда к тегу p будет применен атрибут выравнивания текста align

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

Применяется тогда, когда задан атрибут с определенным значением. Синтаксис применения следующий:

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

На практике можно применить например следующее:

P { color: red; /* Цвет текста */ } p { color: navy; /* Цвет текста */ }

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

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

Img { margin:15px auto; }

Синтаксис для такого способа задания стилей имеет следующий вид:

[атрибут^="значение"] { свойство1: значение; ... } селектор [атрибут^="значение"] { свойство1: значение; ... }

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

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

[атрибут$="значение"] { свойство1: значение; ... } селектор [атрибут$="значение"] { свойство1: значение; ... }

Можете применить этот способ вот так:

Img {/* Если разрешение файла изображения заканчивается на.png */ margin:10px auto; } a { /* Если ссылка заканчивается на.com */ padding-right: 25px; }

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

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

[атрибут*="значение"] { свойство1: значение; ... } селектор [атрибут*="значение"] { свойство1: значение; ... }

В качестве примера я применил стиль для изменения вида ссылок где встречается название «sdcvoy»:

Самостоятельное создание сайта | Язык HTML | Известный поисковик

В результате у меня получилось следующее:

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

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

[атрибут~="значение"] { свойство1: значение; ... } селектор [атрибут~="значение"] { свойство1: значение; ... }