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
Ну, а теперь немного больше времени уделим соседним селекторам. Соседними являются элементы веб-страницы, когда они находятся непосредственно рядом друг с другом в коде документа. При этом синтаксис стилей 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”». Но ведь именно этого мы и добивались, верно?
На этом позвольте закончить сегодняшний мануал, в котором был дан алгоритм применения соседних, а также универсального селекторов. Надеюсь, что данная статья подвигнет вас, уважаемые читатели подписаться на
Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа 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() .
Селектор соседнего элемента выбирает элемент, расположенный в коде документа непосредственно за другим заданным элементом. Давайте для примера возьмём кусок html-кода.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут три тега:
, и . Теги и вложены в контейнер
Они являются дочерними по отношению к нему. Но по отношению друг к другу они являются соседними.
Синтаксис соседнего селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте работу соседнего селектора:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
В примере видно, что селектор соседнего элемента сработал в первом абзеце. Тут теги и идут друг за другом. А во втором абзаце между ними использован тег , теперь тут две другие соседние пары тегов: + и + .
Ошибкой в данном случае будет считать тег соседним по отношению к тегу
Тут тег является дочерним по отношению к тегу
А он, в свою очередь, является родителем .
Пример ниже не сработает:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
Более реальный пример
Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 30px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора соседнего элемента.
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Также используя инструмент соседнего селектора удобно регулировать отступ между заголовком и первым абзацем раздела, в нашем примере это теги
и
Также стоит отметить что для уменьшения отступов удобно использовать отрицательные значения.
Соседний селектор в CSS
Привет!
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Теперь пример того, как при помощи соседнего селектора выделить все элементы списка, кроме первого.
Соседний селектор в CSS
- Пункт списка №1.
- Пункт списка №2.
- Пункт списка №3.
- Пункт списка №4.
Вот что получится в результате работы этого примера:
Рисунок 1. Работа примера №5.
На этом уроке мы познакомимся с селекторами отношений, которые используются для того чтобы выбрать элементы в зависимости от того как они связаны с другими элементами на веб-странице.
Виды отношений между элементами
Каждый элемент на веб-странице может быть связан с другим элементом с помощью одного из следующих отношений:
- родительский элемент, прямой предок - элемент который содержит один или несколько вложенных в него элементов. По отношению к этим вложенным в него элементам он является для них родителем;
- дочерний элемент, прямой потомок, ребёнок, дитя - элемент, который вложен в родительский элемент и по отношению к нему является дочерним элементом, т.е. его ребёнком;
- соседний элемент, сиблинг (брат или сестра) – элементы, у которых один общий родитель. Такие элементы по отношению друг к другу являются сиблингами (соседями).
Рассмотрим следующий пример:
Данный код можно представить в виде следующей схемы:
В вышеприведённом примере выберем элемент 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
Влад Мержевич
Соседними называются элементы веб-страницы, когда они следуют непосредственно
друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
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. Какие теги в данном коде являются соседними?
Формула серной кислоты:H2SO4
И
- и
- и
- и
- и
2. Имеется следующий код HTML
:
Великая теорема Ферма
X n + Y n
= Z n
где n - целое число > 2
Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?
- Вторая «n»
- Вторая и третья «n».
Загрузка...
Возможно вам будет интересно:
Текст 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
Влад Мержевич
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
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. Какие теги в данном коде являются соседними?
Формула серной кислоты:H2SO4
И
- и
- и
- и
- и
2. Имеется следующий код HTML :
Великая теорема Ферма
X n + Y n
= Z n
где n - целое число > 2
Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?
- Вторая «n»
- Вторая и третья «n».
Загрузка...Возможно вам будет интересно:
Последние статьи
