Соседние CSS селекторы, универсальный селектор и их применение. Соседние селекторы

Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность.

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

Подсчет дочерних узлов

Для демонстрации я буду использовать следующую разметку HTML, в течение статьи мы ее несколько раз изменим:

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию элементов HTML, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.

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

Я мог бы попытаться использовать childNodes.length (вместо children.length), но посмотрите на результат:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы - учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.

Проверка существования дочерних узлов

Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает логическое значение, сообщающие об их наличии или отсутствии:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // true

Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:

И вот результат нового запуска hasChildNodes() :

Console.log(myList.hasChildNodes()); // true

Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. Данный метод учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:

И теперь в консоль выводится ожидаемый результат:

Console.log(myList.hasChildNodes()); // false

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

Добавление и удаление дочерних элементов

Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

В данном случае я создаю

с помощью метода createElement() и затем добавляю его к body . Очень просто и вы наверняка использовали эту технику раньше.

Но вместо вставки специально создаваемого элемента, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

Example text

Я могу изменить место расположения списка с помощью следующего кода:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Итоговый DOM будет выглядеть следующим образом:

Example text

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.

Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:

Var myList = document.getElementById("myList"); myList.remove();

Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.

Замена дочерних элементов

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

Example Text

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "example"; myDiv.appendChild(document.createTextNode("New element text")); document.body.replaceChild(myDiv, myPar);

New element text

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

Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:

Example text 1

Example text 2

Example text 3

Я могу заменить третий параграф первым параграфом с помощью следующего кода:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Теперь сгенерированный DOM выглядит так:

Example text 2

Example text 1

Выборка конкретных дочерних элементов

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

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

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

Я могу выбрать первый и последний элементы с помощью этих свойств:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Example one" console.log(myList.lastElementChild.innerHTML); // "Example six"

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

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"

Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.

Вставка контента в DOM

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

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

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

Example Paragraph

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

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

В полученном HTML параграф будет перед списком и это еще один способ перенести элемент.

Example Paragraph

  • Example one
  • Example two
  • Example three
  • Example four
  • Example five
  • Example Six

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

Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .

12 июля 2011 в 13:14

Семантика для CSS селекторов и комбинаторов

  • CSS
  • Перевод

Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

Обучение CSS начинается с классов и ID, а также с использования. и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.

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

H1 + p
Это выделяет следующий p-элемент, расположенный сразу после h1-элемента в DOM. Типографическая теория предполагает, что мы должны использовать отступы в параграфах текста, но только если они следуют за другим параграфом. На практике это может быть использовано, чтобы сделать отступы во всех параграфах, кроме первого:
p + p { text-indent: 1em; }
Это гораздо удобней, чем выделять первый параграф с помощью class=«first». Три строки, никаких классов и полная поддержка браузеров. Если вы располагаете тэги img, относящиеся к наполнению сайта, внутри тэгов p (как, собственно, и следует делать), можно просто отодвинуть их левые поля обратно с помощью негативного значения -1em:
p + p img { margin-left: -1em; }
Довольно просто, правда? А что, если нам захочется выделить первую строку всех параграфов, которые стоят сразу после заголовков, не изменяя всех остальных параграфов? Опять-таки мы можем использовать класс представления. Простой селектор, сделанный из соседнего составного комбинатора, и псевдо-элемент справятся с задачей:
h1 + p::first-line { font-variant: small-caps; }
Примечание: псевдо-элемент:first-line принят в CSS 2.1, в CSS 3 используется запись::, с целью установить различие между псевдо-классами и псевдо-элементами.

Наследственный комбинатор
Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #page или #wrap:

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

Соседние селекторы

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

Пример: допустим, вам необходимо, чтобы каждый абзац

Который идет первым после заголовка

, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:

H1+p { font-style: italic; }

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).

Примеры написания:

/* Отступ от абзаца до картинки 30px */ p+img { padding-top: 30px; } /* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */ h2+h3+p { color: green; }

Родственные селекторы

Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ .

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

Которые идут после заголовка

. Код CSS будет выглядеть так:

H1 ~ p { font-style: italic; }

…и немного HTML для примера:

Заголовок 1

Заголовок 2

Взгляните на HTML-код: стиль применится ко всем тегам

Которые следуют после тега

и находятся до закрывающего тега родителя
. В нашем варианте насчитывается 3 элемента

К которым применится стиль. Обратите внимание, что тег

этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу

Который находится над

, а также к тегу

Имеющему другого родителя

.

Выводы

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

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

Влад Мержевич

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

Lorem ipsum dolor sit amet.

В этом примере тег является дочерним по отношению к тегу

Поскольку он находится внутри этого контейнера. Соответственно

Выступает в качестве родителя .

Lorem ipsum dolor sit amet.

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

Никак не влияет на их отношение.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

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

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

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

В примере 11.1 показана структура взаимодействия тегов между собой.

Пример 11.1. Использование соседних селекторов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Соседние селекторы

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Результат примера показан на рис. 11.1.

Рис. 11.1. Выделение текста цветом при помощи соседних селекторов

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

Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путём и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовём его sic , и станем применять его к тегу

. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.

Пример 11.2. Изменение стиля абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

Изменение стиля абзаца

Методы ловли льва в пустыне

Метод последовательного перебора

Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.

Важное замечание

Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.

Результат данного примера показан на рис. 11.2.

Рис. 11.2. Изменение вида абзаца за счёт использования соседних селекторов

В данном примере текст отформатирован с применением абзацев (тег

), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега

, у которого добавлен класс с именем sic .

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

и

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

и

А также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.

Пример 11.3. Отступы между заголовками и текстом

HTML5 CSS 2.1 IE Cr Op Sa Fx

Соседние селекторы

Заголовок 1

Заголовок 2

Абзац!

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

Вопросы для проверки

1. Какие теги в данном коде являются соседними?

Формула серной кислоты:H2 SO4

  1. И

  2. и
  3. и
  4. и
  5. и

2. Имеется следующий код HTML :

Великая теорема Ферма


X n + Y n
= Z n


где n - целое число > 2

Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?

  1. Вторая «n»
  2. Вторая и третья «n».

Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей 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%;
}
...


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

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

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