Соседние селекторы CSS
Соседние селекторы CSS или как их еще называют селекторы-родственники, позволяют применить стили к элементу в тех случаях, когда он стоит в HTML-коде перед определенным элементом, то есть элементы в данном случае должны находиться на одном уровне вложенности. Соседние селекторы тоже являются составными и складываются из простых селекторов (классов, идентификаторов и т.д.).
Чтобы вы четко усвоили, что такое соседние элементы, давайте снова рассмотрим знакомый пример, только чуть-чуть измененный.
<тег1> <тег2>...тег2> <тег3><тег4>...тег4>тег3> <тег5><тег6>...тег6>тег5> тег1>
В этом примере есть всего две пары соседних элементов - это <тег2> и <тег3> , а также <тег3> и <тег5> , все. То есть <тег2> и <тег5> уже не являются соседями по отношению друг к другу., так как между ними стоит <тег3> .
Соседние селекторы образуются из двух или более обычных селекторов разделенных между собой знаком "+ " (плюс), где сначала указывается самый первый элемент в коде, затем тот, который стоит за ним, потом тот, который стоит сразу за вторым и так далее. Как обычно, стили применяются к тому элементу, селектор которого находится последним в списке. Общий синтаксис.
селектор1 + селектор2 { свойство: значение; свойство: значение; ... }
Пробелы с обоих сторон знака "+ " можно ставить, а можно и нет, по желанию.
Пример использования соседних селекторов в CSS
Заголовок
Текст. Strong. Текст. Em.
Текст. Em. Текст. Strong.
Результат в браузере
Заголовок
Текст. Strong. Текст. Em.
Текст. Em. Текст. Strong.
Текст. Em. Текст. Strong.
В этом примере только первый параграф с красным текстом и только второго параграфа подчеркнут, так как больше никакие элементы не соответствуют правилам заданных стилей. В частности, содержимое элемента в данном случае не будет зеленого цвета, так как его от заголовка отделяет не один, а два параграфа. Кстати, как вы видите, во втором стиле были указаны сразу соседний и дочерний селекторы. Так я решил еще раз напомнить вам о том, что селекторы разных типов можно свободно объединять.
Браузер Internet Explorer 6.0 не понимает соседние селекторы (как и дочерние). Помните об этом.
Домашнее задание.
- Создайте на странице обычный двухколоночный макет с меню. Пусть у элементов списка меню будут макеры-изображения.
- Сделайте так, чтобы, если после тега заголовка
Селектор соседнего элемента выбирает элемент, расположенный в коде документа непосредственно за другим заданным элементом. Давайте для примера возьмём кусок html-кода.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут три тега:
, и . Теги и вложены в контейнер
Они являются дочерними по отношению к нему. Но по отношению друг к другу они являются соседними.
Синтаксис соседнего селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте работу соседнего селектора:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
В примере видно, что селектор соседнего элемента сработал в первом абзеце. Тут теги и идут друг за другом. А во втором абзаце между ними использован тег , теперь тут две другие соседние пары тегов: + и + .
Ошибкой в данном случае будет считать тег соседним по отношению к тегу
Тут тег является дочерним по отношению к тегу
А он, в свою очередь, является родителем .
Пример ниже не сработает:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
Более реальный пример
Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 30px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора соседнего элемента.
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Также используя инструмент соседнего селектора удобно регулировать отступ между заголовком и первым абзацем раздела, в нашем примере это теги
и
Также стоит отметить что для уменьшения отступов удобно использовать отрицательные значения.
Соседний селектор в CSS
Привет!
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Теперь пример того, как при помощи соседнего селектора выделить все элементы списка, кроме первого.
Соседний селектор в CSS
- Пункт списка №1.
- Пункт списка №2.
- Пункт списка №3.
- Пункт списка №4.
Вот что получится в результате работы этого примера:
Рисунок 1. Работа примера №5.
Здравствуйте, уважаемые читатели! Продолжаем тему CSS селекторов и сегодня я постараюсь доступно объяснить, что такое соседние CSS селекторы
, а также какую роль играет универсальный селектор
. Знание механизма использования всех видов средств CSS позволит достичь оптимального и компактного содержания документа, где описаны стили элементов, что является одной из составляющих успешной раскрутки своего ресурса, так что ни в коем случае не пренебрегайте возможностью получить полезную информацию о понятии селектора и его всевозможных видах.
Если вы помните и внимательно следите за публикациями, уже были рассмотрены многие виды селекторов, ; ; . Еще раз призываю не пренебрегать изучением основ CSS, поскольку это даст вам массу преференций в будущем.
Универсальный селектор
Теперь переходим непосредственно к сути сегодняшней публикации. Что касается универсального селектора, то это совсем просто, поэтому долго на нем останавливаться не буду. Синтаксис написания правила CSS, которое использует универсальный селектор, следующий:
Здесь оператор «*» и означает, что перед нами универсальный селектор. Он используется тогда, когда необходимо установить единый стиль для всех элементов на вебстранице. Иногда универсальный селектор указывать не обязательно. Например, запись.*class и.class в этих случаях совершенно идентичны. Теперь обязательно пример. Обычно наиболее распространенным является определение единого шрифта, размера и цвета, а также расположения обычного текста на странице блога или сайта.
* {
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Шрифт для текста */
color: #646464; /* Цвет текста */
font-size: 75%; /* Размер текста */
text-align: left; /* Расположение текста */
}
Таким образом можно определить оформление текста для всех элементов, которые расположены на странице. Отмечу, для данного случая результат будет аналогичным, если вместо универсального селектора использовать название тега body, в состав которого входят теги всех элементов.
Соседние селекторы CSS
Ну, а теперь немного больше времени уделим соседним селекторам. Соседними являются элементы веб-страницы, когда они находятся непосредственно рядом друг с другом в коде документа. При этом синтаксис стилей CSS имеет такой вид:
Теперь возьмем абзац текста, определяемый тегом p, в который в качестве дочерних элементов будут входить теги b, i и big, определяющие форматирование текста, соответственно выделение жирным, курсивом и выделение путем увеличения шрифта:
В этом абзаце используются тег b, тег i, тег big.
И с помощью средства редактирования CSS и HTML, которое встроено в новейших версиях всех популярных браузеров ( , ) и которое является аналогом знаменитого плагина для браузера Firefox (), вставим этот абзац в любое место на абсолютно любой web-странице (я это сделал прямо на странице предыдущей статьи первым параграфом). Это средство, к примеру, в Хроме вызывается простым нажатием клавиши F12. Его можно использовать для практического закрепления материала рубрик «Основы HTML» и «Учебник CSS». Итак, я вставляю кусок текста в виде первого параграфа:
Этот параграф будет подопытным и на его примере рассмотрим применение соседних селекторов
. Как я уже сказал, теги b, i и big являются дочерними для тега абзаца p, поскольку все они находятся непосредственно внутри контейнера p. Здесь соседними являются теги b и i, а также i и big. Теперь применим CSS правило для соседних селекторов:
B+i {color: red;}
i+big {color: green;}
После того, как эти стили будут применены, абзац будет выглядеть так:
Это справедливо для всех тегов вебстраницы, в состав которых входят элементы b, i и big. Причем, рядом обязательно должны находится b и i, i и big, для других сочетаний это CSS правило работать не будет. Я думаю, теперь вам ясно, как применяются соседние селекторы при написании или редактировании CSS документа. Еще одно очень важное замечание: если вы успели заметить, то в случае соседних элементов заданный стиль применяется только ко второму элементу.
Пример с абзацем, который был рассмотрен очень наглядный и позволяет быстро уяснить суть соседних селекторов в CSS. Однако на практике обычно используются другие области приложения соседних селекторов. Скажем, очень часто в тело статьи необходимо включить какой-то кусок текста, особенно оформленный, как то: сноски, примечания и т.д.
Для этих целей обычно создают отдельный class и применяют его к нужному абзацу. Но гораздо более оптимальным путем является применение соседних селекторов. Например, на моем блоге существуют стили, созданные для оформления обычного заголовка h3.
H3 {
font-size: 1.7em; /* Размер шрифта */
text-align: center; /* Размещение текста */
font-weight: normal; /* Нормальное начертание текста */
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */
color: #646464; /* Цвет текста */
}
Для выделения заголовка примечания или сноски зададим особый класс, скажем, put:
H3.put {
color: red; /* Цвет текста */
margin-left: 5px; /* Отступ слева */
margin-top: 0.5em; /* Отступ сверху */
padding: 10px; /* Поля вокруг текста */
text-align: left; /* Расположение текста */
}
Теперь воспользуемся соседними селекторами для создания особого стиля абзаца сноски, этот абзац будет размещаться непосредственно под заголовком со стилем «h3.put»:
H3.put+p {
background: #ffefd5; /* Цвет фона */
margin-left: 15px; /* Отступ слева */
margin-right: 120px; /* Отступ справа */
margin-top: 0.5em; /* Отступ сверху */
padding: 5px; /* Поля вокруг текста */
}
Опять воспользовавшись инструментом для редактирования Google Chrome, которым я вам все уши прожужжал (но он того стоит), вписываем заголовок для сноски, не забыв проставить для него класс put:
Внимание!
Затем пишем текст самой сноски:
Материалы, представленные в данной публикации, являются очень важными в плане
изучения основ CSS (каскадных таблиц стилей)
.
После всех этих телодвижений получаем такой абзац сноски на вебстранице (напоминаю, что этот параграф я вставил в конце предыдущей моей статьи о дочерних и контекстных селекторах):
Теперь на блоге или сайте при привязке класса «put» к любому тегу h3 будет вырисовываться такая сноска на web-странице. Причем оформлен особым образом будет только первый абзац после тега h3 с «class=“put”». Но ведь именно этого мы и добивались, верно?
На этом позвольте закончить сегодняшний мануал, в котором был дан алгоритм применения соседних, а также универсального селекторов. Надеюсь, что данная статья подвигнет вас, уважаемые читатели подписаться на
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)
Комбинаторы
— это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс
(+) или соседний селектор
. Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2
, но только в том случае если он является соседним для селектора 1
и идет сразу после него. Рассмотрим пример:
strong + i {
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег
, т.к. он следует сразу же после тега
.
Комбинатор тильда
(~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2
, который должен следовать за селектором 1
. Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег
, несмотря на то, что во втором случае между тегом
и
стоит тег
.
Комбинатор >
относится к дочерним селекторам
. Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль
будет привязан к селектору 2
, который непосредственно вложен в селектор 1
.
div > strong {
}
...
Это обычный текст. Это жирный курсивный текст .
Это обычный текст. А это обычный жирный текст.
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег
, который непосредственно вложен в тег
. А непосредственным родителем второго тега
является тег
, поэтому правило на него не действует.
Следующим рассмотрим контекстный селектор <пробел>
. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:
<селектор 1> <селектор 2> { <стиль> }
Стиль будет применен к селектору 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 стили к дочерним
тегам;
- символ <пробел> формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
}
...
color: red; /* Красный цвет текста */
}
...
}
...
Это обычный текст. А это обычный жирный текст.
, поэтому правило на него не действует.
Следующим рассмотрим контекстный селектор <пробел> . Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:
<селектор 1> <селектор 2> { <стиль> }
Стиль будет применен к селектору 2 , если он так или иначе вложен в селектор 1 .
Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:
div strong {
font-style: italic /* Курсив */
}
...
Это обычный текст. А это тоже курсивный жирный текст.
Обычный текст и просто жирный текст
Результат:
Как видим, на этот раз правило подействовало на оба тега
, даже на тот, который вложен и в контейнер
. На тег
, который просто вложен в абзац
правило css никак не действует. Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов. Имеет вид: <селектор>[<имя атрибута тега>] { <стиль> } И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например: strong{ Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами. Результат: На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong
, к которому добавлен атрибут title
. Синтаксис этого селектора следующий: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Привязывает стиль
к элементам, теги которых имеют атрибут с указанным именем
и значением
. Пример: a{ Результат: Как видим, оба элемента типа гиперссылка имеют атрибут target
, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу
у которого атрибут target
имеет значение «_blank»
. Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор: [<имя атрибута тега>~=<значение>] { <стиль> } Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например: { Наш телефон: 777-77-77 Наш адрес: Москва ул. Советская 5 Получиться следующий результат: Правило применяется к элементу, у которого среди значений атрибута class
имеется значение tel
. В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией: [атрибут|="значение"] { стиль } Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например: { Результат: В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „
. Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта: [<имя атрибута тега>^=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, теги которых имеют атрибут с указанным именем
и значением, начинающимся с указанной подстроки
. Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе
. Пример: a{ Результат: В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href
начинается со значения http://
. Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис: [<имя атрибута тега>$=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, у которых имеется атрибут
с указанным именем
и имеет значение оканчивающееся указанной подстрокой
. Во втором случае тоже самое, только к указанным селекторам
. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например: IMG { Картинка формата gif Картинка формата png Результат: В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей. Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис: [<имя атрибута тега>*=<подстрока>] { <стиль> } Стиль
привязывается к элементам, у которых имеется атрибут
с указанным именем и его значение содержит указанную подстроку
. Например: IMG { Картинка из папки gallery Картинка из другой папки Результат: В примере стиль применяется к картинкам, которые загружены из папки «gallery»
. На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой: Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль } Кроме того напомню о специальных селекторах CSS: В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями. На этом все, до новых встреч.Селекторы по атрибутам тега
1. Простой селектор атрибута
color:red;
}
...
2. Селектор атрибута со значением
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне3. Одно из нескольких значений атрибута
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
color:red;
font-size:150%;
}
...
4. Дефис в значении атрибута
Селектор[атрибут|="значение"] { стиль }
color:red;
font-size:150%;
}
...
5. Значение атрибута начинается с определенного текста
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
color:green;
font-weight:bold;
}
...
6. Значение атрибута заканчивается определенным текстом
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
border: 5px solid red;
}
...
7. Значение атрибута содержит указанную строку
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
border: 5px solid red;
}
...