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 третьего параграфа это слово также присутствует, но не в начале. Приведу для закрепления еще пример, когда удобно использовать оператор «^».

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

Важное преимущество CSS — это возможность применения стилей ко всем однотипным элементам страницы. Чтобы эффективно пользоваться данной возможностью, нужно хорошо разобраться с CSS селекторами . Селектор — это как раз то, к чему применяется какое-либо правило.

Существует несколько видов CSS селекторов. Перейдем к рассмотрению этих видов и примеров их применения.

Универсальный селектор

Универсальный селектор задает стиль всем элементам документа. Обозначается символом звездочки (*). Например, данное определяет, что все элементы будут иметь красный цвет:

* {color: red;}

Селекторы элементов

Когда пишутся стили для HTML документа, то в качестве элементов выступают HTML теги (h1, p, img, a, body...). Например:

H1 { font-family:Verdana; font-size:12px; color:#666; }

В данном случае все заголовки первого уровня в документе будут иметь шрифт Verdana, размер 12px и серый цвет.

Селекторы классов

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

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

А в файле стилей пишем правило:

Border_img {border:1px solid #00f;}

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

Селекторы идентификаторов

Тоже позволяет назначить стиль независимо от типа элемента. Но, в отличии от селектора классов, может использоваться в документе только один раз. Обозначается символом решетки (# ). У тега прописывается атрибут id . Например:

... #menu { width:25%; background-color:#ccc; float:left; }

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

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

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

img {border:1px solid red;}

Можно выбрать только те теги, атрибуты которых имеют определенное значение. Нужно, например, ко всем тегам с атрибутом type , значение которого text , применить правило — размер текста 16px. Делается следующим образом:

{font-size:16px;}

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

{margin:5px;}

Если нужно выбрать атрибут, значение которого начинается с какого-либо текста:

{color:#009};

Если нужно выбрать атрибут, значение которого заканчивается на какой-либо текст:

{font-size:10px;}

Если нужно выбрать атрибут, значение которого содержит какой-либо текст:

{background-color:#0cc;}

Селекторы потомков (контекстные селекторы)

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

p>a {color:red;}

Селекторы сестринских (соседних) элементов

Для выбора соседних элементов, расположенных на одном уровне, имеющих одного родителя делаем так:

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

strong + em {font-style:italic;}

Соседними в данном случае являются теги strong и em , а так же em и a .

Селекторы псевдоклассов

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

Например, нужно изменить цвет посещенных ссылок:

A:visited {color:#933;}

Или, например, изменить цвет текста при фокусе (установке курсора) на текстовом поле формы:

Input:focus {color: red;}

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

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

В CSS2 определено 4 псевдоэлемента: первая буква (:first-letter ), первая строка (:first-line ) и применение специальных стилей до (:before )и после (:after ) элемента.

Зададим, к примеру, первой букве каждого абзаца свой стиль:

P:first-letter { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #333; }

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

На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.

В jQuery выборка элементов по атрибуту выполнена в соответствии со спецификацией CSS.

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

Например:

... ... ... // Выбрать элементы a, имеющие атрибут $("a");

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

• двойные кавычки внутри одинарных кавычек: $("a") .
• одинарные кавычки внутри двойных кавычек: $("").
• экранированные одинарные кавычки внутри одинарных кавычек: $("a") .
• экранированные двойные кавычки внутри двойных кавычек: $("a") .

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

jQuery - Селекторы для поиска элементов по атрибуту

Выбирает элементы, которые имеют указанный атрибут (name) со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.

Например, выбрать все элементы div , которые имеют атрибут class со значением, равным alert или начинающимся с alert- .

...

... ... ... ... ... //Выберет все элементы div, которые имеют атрибут class со //значением alert или со значением, начинающимся с alert- $("div");

Выбирает элементы, который имеют указанный атрибут (name) со значением, содержащим заданную подстроку (value).

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

... ... ... //Выберет элементы, которые имеют атрибут href со значением //содержащим подстроку youtube $("");

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

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

... ... Отправить ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, которое заканчивается заданным значением (value).

Например, выбрать все элементы, которые имеют атрибут href , заканчивающийся на ".zip".

... ... ... //выберет все элементы а, у которых значение атрибута href заканчивается на.zip $("a");

Выбирает элементы, у которых указанный атрибут (name) имеет значение value .

Например, выбрать все элементы, которые атрибут type со значением button:

Информация о заказе $("");

Выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).

Например, выбрать элементы a , которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

... ... ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).

Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".

... ... ... $("a.btn");

Выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.

Например, выбрать изображения (img), имеющие атрибут alt:

$("img");

- выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).

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

$(""); //attr1 - селектор атрибута 1 //attr2 - селектор атрибута 2 //attrN - селектор атрибута N

Например, выбрать элементы a , имеющие атрибут id , атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

... ... $("a");

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

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

Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)

Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.

Первый комбинатор символ плюс (+) или соседний селектор . Плюс устанавливается между двумя селекторами:

+ { }

Стиль в этом случае применяется к селектору 2 , но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:

strong + i {

}
...

Это обычный текст. Это жирный текст, обычный текст, красный текст

Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.

Результат:

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

Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:

~ { }

Стиль будет применен к селектору 2 , который должен следовать за селектором 1 . Рассмотри пример:

strong ~ i {
color: red; /* Красный цвет текста */
}
...

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

Это обычный текст. Это жирный текст, обычный текст, а это красный текст.

Результат:

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

Комбинатор > относится к дочерним селекторам . Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:

> { }

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

div > strong {

}
...
Это обычный текст. Это жирный курсивный текст .

Это обычный текст. А это обычный жирный текст.

И результат:

Как видно на рисунке, правило стиля подействовало только на первый тег , который непосредственно вложен в тег . А непосредственным родителем второго тега является тег

, поэтому правило на него не действует.

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

{ }

Стиль будет применен к селектору 2 , если он так или иначе вложен в селектор 1 .

Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:

div strong {
font-style: italic /* Курсив */
}
...
Это обычный текст. Это жирный курсивный текст .

Это обычный текст. А это тоже курсивный жирный текст.

Обычный текст и просто жирный текст

Результат:

Как видим, на этот раз правило подействовало на оба тега , даже на тот, который вложен и в контейнер и в абзац

. На тег , который просто вложен в абзац

правило css никак не действует.

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

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

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

Имеет вид:

[] { }

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

strong{
color:red;
}
...

Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.

Результат:

На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong , к которому добавлен атрибут title .

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

Синтаксис этого селектора следующий:

[=] { }

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

a{
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне

Результат:

Как видим, оба элемента типа гиперссылка имеют атрибут target , но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу у которого атрибут target имеет значение «_blank» .

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 стили к дочерним тегам;
• символ формирует контекстные селекторы.

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

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