Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа 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);
В данном случае я создаю
Но вместо вставки специально создаваемого элемента, я также могу использовать 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);
Как видите, метод 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() .
На этом уроке мы познакомимся с селекторами отношений, которые используются для того чтобы выбрать элементы в зависимости от того как они связаны с другими элементами на веб-странице.
Виды отношений между элементами
Каждый элемент на веб-странице может быть связан с другим элементом с помощью одного из следующих отношений:
- родительский элемент, прямой предок - элемент который содержит один или несколько вложенных в него элементов. По отношению к этим вложенным в него элементам он является для них родителем;
- дочерний элемент, прямой потомок, ребёнок, дитя - элемент, который вложен в родительский элемент и по отношению к нему является дочерним элементом, т.е. его ребёнком;
- соседний элемент, сиблинг (брат или сестра) – элементы, у которых один общий родитель. Такие элементы по отношению друг к другу являются сиблингами (соседями).
Рассмотрим следующий пример:
Данный код можно представить в виде следующей схемы:
В вышеприведённом примере выберем элемент p и рассмотрим, как он связан с другими элементами в коде:
- Родительский элемент – div ;
- Соседний элемент – h1 ;
- Прямые потомки, дети – элементы strong , em .
Элемент1 Элемент2
В этом селекторе элемент1 и элемент2 связаны между собой отношением "предок потомок". Т.е. он используется для выбора элементов2 , которые расположены внутри элемента1 в HTML документе. Другими словами, он выбирает все элементы2 , которые являются потомками элемента1 .
Например выбрать и установит стиль каждому элементу p , который является потомком элемента div:
Div p { color:red; }
Текст 1
Текст 2
Текст 4
текст 5
Элемент1 > Элемент2
В этом селекторе элемент1 и элемент2 связаны между собой отношением "родитель > ребёнок". Т.е. он используется для выбора элементов2 , которые являются детьми элемента1 . Другими словами, он выбирает все элементы2 , которые имеют в качестве непосредственного родителя элемент1 .
Например выбрать и установит стиль каждому элементу p , у которого родитель является элементом div:
Div > p { color:red; }
Текст 1
Текст 2
текст 5
Элемент1 + Элемент2
Селектор Элемент1 + Элемент2 предназначен для выбора элементов2 , которые расположены сразу же после элемента1 , и являются они по отношению друг к другу соседями. Другими словами, данный селектор используется для выбора элемента2 , который расположен сразу же после элемента1 , и при этом они должны иметь одного и того же родителя в HTML документе.
Например выбрать и установит стиль каждому элементу p , который расположен сразу же после элемента div . Причём выбрать нужно только те элементы p , которые находятся на том же уровне вложенности, что и элементы div , т.е. они должны являться по отношению друг к другу соседями:
Div + p { color:red; }
Текст 1
Текст 2
Текст 3
Элемент1 ~ Элемент2
Селектор Элемент1 ~ Элемент2 предназначен для выбора элементов2 , которые расположены после элемента1 , и являются они по отношению друг к другу соседями. Другими словами, данный селектор используется для выбора элементов2 , которые расположены после элемента1 , и при этом они должны иметь одного и того же родителя в HTML документе.
Например выбрать и установит стиль каждому элементу p , который расположен после элемента div . Причём выбрать нужно только те элементы p , которые находятся на том же уровне вложенности, что и элементы div , т.е. они должны являться по отношению друг к другу соседями:
Div ~ p { color:red; }
Текст 1
Текст 2
Текст 3-1
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей 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 { Это обычный текст. А это тоже курсивный жирный текст. Обычный текст и просто жирный текст Результат: Как видим, на этот раз правило подействовало на оба тега
, даже на тот, который вложен и в контейнер
. На тег
, который просто вложен в абзац
правило 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: В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями. На этом все, до новых встреч. Здравствуйте, уважаемые читатели! Продолжаем тему CSS селекторов и сегодня я постараюсь доступно объяснить, что такое соседние CSS селекторы
, а также какую роль играет универсальный селектор
. Знание механизма использования всех видов средств CSS позволит достичь оптимального и компактного содержания документа, где описаны стили элементов, что является одной из составляющих успешной раскрутки своего ресурса, так что ни в коем случае не пренебрегайте возможностью получить полезную информацию о понятии селектора и его всевозможных видах. Если вы помните и внимательно следите за публикациями, уже были рассмотрены многие виды селекторов, ; ; . Еще раз призываю не пренебрегать изучением основ CSS, поскольку это даст вам массу преференций в будущем. Теперь переходим непосредственно к сути сегодняшней публикации. Что касается универсального селектора, то это совсем просто, поэтому долго на нем останавливаться не буду. Синтаксис написания правила CSS, которое использует универсальный селектор, следующий: Здесь оператор «*» и означает, что перед нами универсальный селектор. Он используется тогда, когда необходимо установить единый стиль для всех элементов на вебстранице. Иногда универсальный селектор указывать не обязательно. Например, запись.*class и.class в этих случаях совершенно идентичны. Теперь обязательно пример. Обычно наиболее распространенным является определение единого шрифта, размера и цвета, а также расположения обычного текста на странице блога или сайта.
* {
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Шрифт для текста */
color: #646464; /* Цвет текста */
font-size: 75%; /* Размер текста */
text-align: left; /* Расположение текста */
}
Таким образом можно определить оформление текста для всех элементов, которые расположены на странице. Отмечу, для данного случая результат будет аналогичным, если вместо универсального селектора использовать название тега body, в состав которого входят теги всех элементов. Ну, а теперь немного больше времени уделим соседним селекторам. Соседними являются элементы веб-страницы, когда они находятся непосредственно рядом друг с другом в коде документа. При этом синтаксис стилей 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”». Но ведь именно этого мы и добивались, верно? На этом позвольте закончить сегодняшний мануал, в котором был дан алгоритм применения соседних, а также универсального селекторов. Надеюсь, что данная статья подвигнет вас, уважаемые читатели подписаться на В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов. С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу. Пример:
допустим, вам необходимо, чтобы каждый абзац Который идет первым после заголовка H1+p {
font-style: italic;
}
Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN). Примеры написания:
/* Отступ от абзаца до картинки 30px */
p+img {
padding-top: 30px;
}
/* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */
h2+h3+p {
color: green;
}
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ . Пример:
немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев Которые идут после заголовка H1 ~ p {
font-style: italic;
}
…и немного HTML для примера:
Взгляните на HTML-код: стиль применится ко всем тегам Которые следуют после
тега К которым применится стиль. Обратите внимание, что тег Который находится над
Имеющему другого родителя Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя. С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
font-style: italic /* Курсив */
}
...
Селекторы по атрибутам тега
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;
}
...
Универсальный селектор
Соседние селекторы CSS
Внимание!
Соседние селекторы
, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
Родственные селекторы
. Код CSS будет выглядеть так:
Заголовок 1
Заголовок 2
и находятся до
закрывающего тега родителя
этому никак не помешает. Заметьте также, что в данном случае стиль не будет
применен к тому тегу
, а также к тегу
Выводы
Лучшие статьи по теме