Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей 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 стили к дочерним тегам;
- символ формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
- Выполняемая задача - выбор всех элементов по наличию или значению заданного атрибута.
- Обозначение - запись, определяющая тип селектора в квадратных скобках.
Важно! IE6 не понимает этот селектор.
Подробнее про селектор атрибутов Выбор по наличию атрибутаВыбираем все элементы, у которых существует (задан в HTML) данный атрибут.
Синтаксис:
Element
Тут и далее Element , это какой-либо простой селектор (div , p , .header , div#popup , * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит , который, в этой ситуации можно опустить.
Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:
{ font-weight: bold; }
Выбор по точному значению атрибутаВыбираем все элементы, заданный атрибут которых имеет точное совпадение значения.
Синтаксис:
Element
Пример. Зададим цвет фона только для тех , значение атрибута которых в точности равно "submit" (для кнопки отправки формы):
Input { background: #0f0; }
Выбор по частичному значению атрибута
Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.
Синтаксис:
Element
Пример. Зададим обтекание для тех элементов , в перечне значений атрибута , которых присутствует "sideBar" (вот это-то и есть, фактически, ):
Div { float: left; }
Выбор по конкретным значениям атрибутов
Выбираем все элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):
{ /* какие-то стили */ }
Новые селекторы атрибутов в CSS3
CSS3 несколько расширяет возможности выбора по конкретным значениям атрибутов и дополняет их еще тремя вариантами.
Выбор по началу значения атрибутаВыбираем все элементы, заданный атрибут которых начинается с определенного значения.
Синтаксис:
Element
Пример. Зададим стили для всех элементов, атрибут которых начинается со слова "Hint":
{ /* какие-то стили */ }
Выбор по окончанию значения атрибута
Выбираем все элементы, заданный атрибут которых оканчивается на определенное значение.
Синтаксис:
Element
Пример. Зададим стили для всех элементов , которые ссылаются на гифки:
Img { /* какие-то стили */ }
Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.
Синтаксис:
Element
Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "сайт":
A { /* какие-то стили */ }
Это тоже главная
