Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей 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%;
}
...
Результат:
В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «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 стили к дочерним тегам;
- символ формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
Влад Мержевич
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type . При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибутаУстанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
В примере 13.1 показано изменение стиля тега , в том случае, если к нему добавлен атрибут title .
Пример 13.1. Вид элемента в зависимости от его атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
Селекторы атрибутов Q { font-style: italic; /* Курсивное начертание */ quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */ } Q { color: maroon; /* Цвет текста */ }
Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.
Результат примера показан на рис. 13.1.
Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title
В данном примере меняется цвет текста внутри контейнера , когда к нему добавляется title . Обратите внимание, что для селектора Q нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q .
Атрибут со значениемУстанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.
В примере 13.2 показано изменение стиля ссылки в том случае, если тег содержит атрибут target со значением _blank . При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 13.2. Стиль для открытия ссылок в новом окне
HTML5 CSS 2.1 IE Cr Op Sa Fx
Селекторы атрибутов A { background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */ }
Результат примера показан ниже (рис. 13.2).
Рис. 13.2. Изменение стиля элемента в зависимости от значения target
В данном примере рисунок к ссылке добавляется с помощью свойства background . В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat , что в итоге даст единственное изображение.
Значение атрибута начинается с определённого текстаУстанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http:// , его и добавляем к селектору A , как показано в примере 13.3.
HTML5 CSS 2.1 IE Cr Op Sa Fx
Селекторы атрибутов A { font-weight: bold /* Жирное начертание */ }
