Крутые сайты для бизнеса

Относительные селекторы в CSS3

Селектор потомка (AB)

Вы определенно знакомы с этим видом селекторов. Вложенный селектор указывает на любой элемент B, который происходит от элемента A(потомок, потомок потомка и т. д.). Например, ol 1 і выберет на странице все элементы li, находящиеся внутри нумерованных списков. Однако в числе прочих это будут также и элементы 1 і в ненумерованных списках, помещенные внутрь нумерованных – а это вряд ли то, чего вы хотите.

Селектор дочернего элемента (A > B)

Этот селектор адресуется к любым элементам B, являющимся прямым потомком элемента A, все прочие наследники будут проигнорированы. Возвращаясь к приведенному выше примеру, ol > li позволит выбрать все элементы в нумерованных списках, при этом другие элементы выбраны не будут.

Селектор сестринского элемента (A + B)

Этот селектор таргетирует любой элемент B, имеющий того же самого предка, что и A, и следующего следом за A в разметке. Например, li + li выделит все в данном контейнере.

Селектор обобщенных родственных элементов (A ~ B)

Основная задача селектора обобщённых родственных элементов — выбор элемента (-ов), идущего после заданного элемента, и имеющего с ним общего родителя.

Обозначается всё это вот так:

A~B {style}, гдеAиB — строковые значения, определяющие селектор.style — применяемые свойства.

Пример:
HTML:

<article>
    <h1>Заголовок</h1>
    <h2>Подзаголовок 1</h2>
    <p>Это абзац с текстом</p>
    <h2>Подзаголовок 2</h2>
    <span>Это текст, обрамлённый в span</span>
 </article> 


CSS:

h1~h2 {
    color:red;  
}

В результате в красный цвет окрасятся заголовки h2, т.к. у них общий родительский элемент с заголовком h1, и в коде они стоят после него. 

Есть интересный проект?

Давайте продумаем его и реализуем. Для начала свяжитесь с нами любым удобным для вас способом.

Хочешь работать у нас?

Посмотри, что у нас есть для тебя в разделе вакансии.

Есть вопросы?

Воспользуйтесь формой обратной связи или просто позвоните нам, мы с радостью на них ответим.

Звоните: +7 (861) 290-03-08

Пишите: info@webemot.com