Как обратиться к предыдущему элементу css
Перейти к содержимому

Как обратиться к предыдущему элементу css

  • автор:

Как обратиться к объекту в сss?

Как обратиться к предыдущему элементу? Немного глупый вопрос, но меня заинтересовали возможности обращения в css. Есть ли только дочерние, соседние и последовательные, или есть что то, что ускользнуло от моего внимания?

Пример: есть список и как сделать так, чтобы при наведении на .hover цвет первого и второго элемента менялся на красный?

Только так, или есть фишечки типа обращения, обратного «~»? «при наведении на .hover поменяй цвет предыдущих на красный»

  • Вопрос задан более трёх лет назад
  • 186 просмотров

1 комментарий

Простой 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. Какие теги в данном коде являются соседними?

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

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

  1. «X»
  2. «Y»
  3. «Z»
  4. Вторая «n»
  5. Вторая и третья «n».

Ответы

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

Часть 4. Соседние и родственные селекторы

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

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

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

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

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

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

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

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

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

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

, которые идут после заголовка . Код CSS будет выглядеть так:

h1 ~ p

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

 

Текст

Заголовок 1

Текст

Текст

Заголовок 2

Текст

Текст

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

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

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

, который находится над , а также к тегу

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

Выводы

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

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

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

Курсы javascript

Помогите обратится к предыдущему элементу

при нажатии на
и т.д.

Как сделать только у предыдущего li менялось css?

$(document).ready(function()< var $curr = $(".current"); $curr.css("background", ""); $(".next").click(function () < $curr = $curr.next(); $("li").css("background", "yellow"); $curr.css("background", ""); >); >);

Последний раз редактировалось Blackmore1991, 02.07.2013 в 21:42 .
02.07.2013, 21:58
Регистрация: 11.09.2010
Сообщений: 8,804

Перед выполнением шестой строчки в $curr находится как раз «предыдущий» li. И что-то по коду не видно чтобы класс .current передавался следующему li. И вобще — зачем возиться с css в коде, когда можно оформить все в css-файле через селектор .current ?

02.07.2013, 22:00
Интересующийся
Регистрация: 13.03.2013
Сообщений: 18
При нажатии на span передается класс current следующему li

(function($) < (function($) < $(function() < $('ul.tabs').on('click', 'li:not(.current)', function() < $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide(); >) >) >)(jQuery)

02.07.2013, 22:07
Регистрация: 11.09.2010
Сообщений: 8,804
Ну вот, бери теперь фломастеры css файл и раскрашивай свои li’шки. В чем траблы то?
02.07.2013, 22:16
Интересующийся
Регистрация: 13.03.2013
Сообщений: 18

мне нужно , чтобы когда current перешел на вторую li , то первая li стала желтого цвета, а когда current на 3 li , то вторая li тоже стала бы желтой. Ну и обратно тоже можно.

Последний раз редактировалось Blackmore1991, 02.07.2013 в 22:23 .
02.07.2013, 22:51
Интересующийся
Регистрация: 13.03.2013
Сообщений: 18

Вот почти что мне нужно .
Но на втором шаге он следующий элемент перекрашивает(

$(document).ready(function()< var $curr = $(".current"); $curr.css("color", "#cb2a34"); $(".step_next").click(function () < $curr = $curr.next(); $(".tabs li").prev().css("color", "#09e8f5"); $curr.css("color", "#cb2a34"); >); >);

02.07.2013, 23:07
Регистрация: 27.05.2010
Сообщений: 33,050

Blackmore1991,

вариант кнопок вперёд назад

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *