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

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

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

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

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

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

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

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

Селекторы потомков. Псевдоклассы, псевдоэлементы и псевдоселекторы CSS

Псевдоселекторы, псевдоэлементы и псевдоклассы в CSS

Псевдоклассы — это селекторы, которые определяют элементы на странице не по классам, прописанным разработчиком, а по специфическому состоянию HTML-элементов. Например, когда на элемент страницы наводится курсор мыши, он переходит в специфическое состояни е . Чтобы задать обычный стиль этому элементу, мы используем какой-нибудь основной селектор, а чтобы задать стиль при наведении курсора на него, мы используем псевдокласс. При описании стилей псевдокласс а е го селектор всегда начинается с «двоеточия»:

:

>

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

Псевдоклассы CSS, которые отвечают за действия пользователя

1. «:hover». Этот псевдокласс используется , когда мы хотим задать стили элементу, на который навели курсор. В этом случае синтаксис селектора будет таким: « :hover».
2. «:focus». Этот псевдокласс помогает задать стиль элементу, на котором сфокусировано внимание пользователя. Например , пользователь заполняет какую-то форму на сайте. В момент заполнения форм ы е е можно как-то выделить при помощи данного псевдокласса.
3. «:link» и «visited». Эти псевдоклассы применяются исключительно к ссылкам. Первый задает стили ссылке, которую еще не посетили, а второй — ссылке, которую уже посетили.
4. «:active». Этот псевдокласс используетс я в тот момент, когда пользователь активно взаимодействует с элементом страницы. Например, пользователь только нажал на ссылку или кнопку, но еще не отпустил их.

Псевдоклас с ы, которые определяют «соседство» html-элементов

1. «:first-child». Этот псевдокласс всегда определяет первый элемент собственного родителя. Например, у нас есть большой текст , и мы хотим выделить в нем стилями первый абзац. В этом случа е м ы к тексту применяем данный псевдокласс и описываем стили. Псевдокласс «привязывается» не к конкретному элементу, а лишь к его расположению. Например, в начале нашего текста добавляем новый абзац — теперь он будет попадать под действие этого псевдокласса.
2. «:last-child». Работает точно так же , как и первый псевдокласс, но только с последними дочерними элементами родителя.
3. «:only-child». Этот псевдокласс определяет все дочерние элемент ы родительского класса, при условии что они являются единственными у своего родителя.
4. «:nt h -child(номер элемента)». Этот псевдок ла сс позволяет обратиться к конкретному номеру элемента своего родителя. Например , у вас на сайте реализован список , в ы хотите выбрать конкретный пункт списка и выделить его стилями — т огда вам поможет данный псевдокласс.

Псевдоэлементы CSS

1. «::after». Определяет псевдоэлемент, который появится после существующего , родительским элементом.
2. «::before». Определяет псевдоэлемент, который появляется перед существующим , родительским элементом.

Заключение

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

CSS как выбрать родительский элемент, зная дочерний

Я могу отдельно выбрать каждый span. Могу-ли я как-то выбрать в css родительский ?
Или через jquery?
Большое спасибо.

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

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

Оценить 1 комментарий

Serezhka @Serezhka Автор вопроса
Торопился, в коде ошибся, span не закрыл. Но суть не в этом 🙂
Решения вопроса 1

Если на jQuery, то $(‘#span2’).parent() это элемент списка
$(‘#span2’).parent().css(‘Element’) — доступ к css-ке li

Или что-то другое имеется ввиду?

Ответ написан более трёх лет назад
Комментировать
Нравится 5 Комментировать
Ответы на вопрос 8
Serezhka @Serezhka Автор вопроса

Спасибо, ребята, за помощь.
Действительно нужно было именно зная дочерний, добраться до родительского, потому что к дочерним проставляются id, а к родителям нет. И к некоторым родителям нужно добавлять уникальные классы.
Хотелось бы именно через CSS, потому что через jquery я бы также всем родителям проставил id.
Но большое спасибо за помощь!
Вы мне очень помогли.
С уважением.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Вот интересная статейка в тему: web-standards.ru/articles/parent-selector/
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
И, кстати, у вас не закрыты теги span, что есть очень не хорошо.
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Конечно, лучше всего навесить класс на контейнер, это будет самое верное решение.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
И от него добираться до нужно дочернего элемента.
$(elem).parent()
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

Ну, если любой span в li, то просто:

li span

Ответ написан более трёх лет назад
Doktor_Gradus @Doktor_Gradus

Не, по вопросу он хочет наоборот, что-то вроде:

.span li:parent < //declaration block >

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

+ для следующего брата. Есть ли эквивалент для предыдущего брата?

14 ответов

нет, нет селектора» предыдущий брат».

на соответствующей ноте,

для общего брата-преемника (то есть элемент приходит после этого, но не обязательно сразу после) и является селектором CSS3. + для следующего брата и CSS2.1.

Я нашел способ, чтобы стиль всех предыдущих братьев и сестер (напротив

), которые могут работать в зависимости от того, что вам нужно.

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

селекторы Уровень 4 вводит :has() (ранее предметный указатель ! ), который позволит вам выбрать предыдущего брата с:

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

рассмотрим order свойство компоновок flex и grid.

я сосредоточусь на flexbox в приведенных ниже примерах, но те же понятия применимы к Grid.

С помощью flexbox можно смоделировать предыдущий селектор братьев и сестер.

в частности, flex order свойство может перемещать элементы по экрану.

вы хотите, чтобы элемент A стал красным, когда элемент B завис.

сделать ul контейнер.

изменить порядок братьев и сестер в разметке.

используйте селектор брата для целевого элемента A (

или + будет делать) .

используйте flex order свойство для восстановления порядка братьев и сестер на визуальном дисплее.

. и вуаля! Предыдущий селектор родного брата рождается (или, по крайней мере, моделируется).

из flexbox spec:

5.4. Порядок отображения: order свойства

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

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

исходная order значение для всех элементов flex равно 0.

примеры «предыдущих селекторов брата», созданных с помощью flex order свойство.

jsFiddle

Примечание-два устаревших представления о CSS

Flexbox разрушает давние убеждения о CSS.

сказать, что эта вера широко распространена, было бы преуменьшением. Вот выборка связанных вопросов только о переполнении стека:

на z-index миф

другой давней Верой было то, что z-index работает только для позиционированных элементов.

в самом деле, самая последняя версия спецификации-the Черновик редактора W3C – все еще утверждает, что это правда:

• значение: auto / / inherit
• исходные: авто
• применяется к: расположенным элементам
• наследуется: нет
• Проценты: N / A
• Media: visual
• вычисляемое значение: как задано

на самом деле, однако, эта информация устарела и неточна.

4.3. Flex Item Z-Заказ

элементы Flex рисуют точно так же, как встроенные блоки, за исключением того, что заказ-измененный порядок документа используется вместо raw порядок документов и z-index значения auto создать контекст укладки, даже если position is static .

5.4. Z-ось заказ: с z-index свойства

порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок измененного документа используется вместо заказа необработанного документа, и z-index значения auto создайте контекст штабелирования, даже если position is static .

вот демонстрация z-index работа на non-positioned деталях гибкого трубопровода: https://jsfiddle.net/m0wddwxs/

у меня был тот же вопрос, но потом у меня был момент «дух». Вместо того чтобы писать!—3—>

очевидно, что это соответствует » x «вместо » y», но он отвечает » Есть ли совпадение?»вопрос, и простой обход DOM может привести вас к правильному элементу более эффективно, чем цикл в javascript.

Я понимаю, что исходный вопрос был вопросом CSS, поэтому этот ответ, вероятно, совершенно неуместен, но другие пользователи Javascript могут наткнуться на вопрос через поиск, как я это сделал.

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

Смежные селекторы предшествующих элементов CSS и способы их имитации

Но у нас нет способа выбрать те, которые расположены раньше. Либо родительские селекторы, либо предыдущие селекторные одного уровня — такого просто нет.

Я знаю, что вы этого хотите, вы знаете, что я этого хочу, но суровая правда в том, что они не существуют (и, вероятно, никогда не будут). Есть миллион сообщений «Почему?». Есть даже предложения о том, как их реализовать. Но мы застреваем на однонаправленной обработке правил CSS — это делается, скорее всего, чтобы защитить нас от «плохого опыта», связанного с неправильным течением потока обработки или даже бесконечными циклами.

К счастью, как и в случае большинства ограничений CSS, мы можем имитировать это. Первое, что нужно учитывать — это то, для чего нам нужны предыдущие одноуровневые элементы. Существуют два случая:

Нам нужно выбрать все элементы одного уровня с элементом, а комбинатор

выбирает только те, которые расположены после.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Нам нужно выбрать только элементы одного уровня, которые расположены раньше

1. Выбор всех элементов одного уровня

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

Например, чтобы выбрать все span в следующей структуре, когда мы наводим указатель мыши на любой из них, мы могли бы просто использовать селектор дочерних элементов для родителя. Нам нужно переключить pointer-events с родителя на дочерние элементы. Таким образом, любое действие, которое мы хотим осуществить, будет срабатывать только при вводе для дочернего элемента, а не самого родителя.

Если вам нужно выбрать все элементы одного уровня, кроме того, на который был наведен курсор, вы можете совместить предыдущий метод с селектором :not, чтобы исключить его. Стандартным примером для этого является меню:

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

Кроме того, вы можете использовать селекторы type и nth, чтобы дополнительно отфильтровать нужные элементы. Задав определенные стили, мы можем получить следующее:

Обратите внимание: если вы хотите использовать подход pointer-events:none, помните, что это может нарушить порядок стекирования (возможно, вы выберете элементы, которые «ниже» в порядке стекирования). Это также не будет работать в IE10 и ниже, если только вам не нужны указатели события для чего-то другого. Поэтому будьте очень осторожны при использовании.

2. Выбор предыдущих элементов

Для этого варианта использования мы можем изменить в обратном направлении порядок сортировки в HTML, а затем отсортировать элементы обратно в CSS и использовать селекторы

и +. Таким образом, мы будем выбирать следующие элементы, но самом деле это будут предыдущие.

Существует несколько способов сделать это. Самый простой и, вероятно, самый старый — это изменение направления написания нашего контейнера:

Если ваши элементы должны отображать фактический текст, вы всегда можете отменить это обратно:

Но во многих случаях это может быть неудобно. К счастью, современный инструментарий CSS позволяет сделать это намного проще и безопаснее. Мы можем просто использовать для контейнера Flexbox и изменить порядок с помощью flex-direction: row-reverse:

Лучшее в этом подходе то, что мы не вносим путаницу в направление написания. Нам не нужно перезагружать дочерние элементы, и все гораздо более предсказуемо.

Использование «предыдущих элементов одного уровня» для создания системы звезд-рейтингов на чистом CSS

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как мы рассматривали ранее, элементы находятся в обратном порядке тому, который позволяет нам применить селектор «предыдущий элемент одного уровня». Обратите внимание, что мы используем для представления пустых звезд символ юникода “white star” (U + 2606).

Давайте отобразим их рядом друг с другом, в правильном (обратном) порядке:

Теперь скроем сами переключатели, никому не нужно их видеть:

И применим некоторые стили к символам звездочек:

Единственная действительно важная строка — это position: relative. Это позволит нам по абсолютно позиционировать псевдо-элемент с закрашенной звездой (U + 2605), который будет изначально скрыт.

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

То же делается для выбранного рейтинга, через сопоставление всех меток, которые находятся перед выбранной радио-кнопкой:

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

И последнее, но не менее важное: нам нужно «запомнить» текущий рейтинг, на случай, если пользователь захочет его изменить. Например, если он выбрал пять звезд и по какой-либо причине хочет изменить их на четыре, мы должны отображать звезды с 1 по 4, как заполненные, а пятую — полупрозрачной при наведении указателя на четвертую.

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

Вот для чего нам нужно pacity:1 !important в начальном объявлении наведения. В противном случае это последнее правило переопределило бы другие в соответствии со специфичностью и применило полупрозрачную заливку ко всему.

И там у нас есть это, кроссбраузерная, полностью функциональная система звезд-рейтингов с использованием только селекторов «предыдущие элементы одного уровня».

Как вы можете видеть, просто потому, что «это невозможно» не означает, что вы не должны пытаться. Программирование — это раздвижение границ. Поэтому каждый раз, когда вы упираетесь в стену, просто попробуйте надавить немного сильнее. Или лучшей аналогией, я думаю, будет — найдите свой обходной путь? … в любом случае, вы понимаете, что я имею в виду. Продолжайте взламывать!

Замечания относительно доступности

Предыдущий фрагмент — это упрощение для лучшего понимания. Это не то, что я бы рекомендовал использовать в реальной среде из-за многих ограничений доступности.

Чтобы сделать сниппет немного более доступным, первым делом нужно было бы скрыть радио-кнопки с помощью другого способа, а не display: none, чтобы сделать их фокусируемыми. Мы также должны добавить кольцо фокусировки на весь фрагмент звёзд, когда любой элемент внутри выделен фокусом, это делается через псевдо-селектор :focus-in.

Метки «звезды» не имеют смысла для экранных дикторов, поэтому наилучшим подходом будет наличие внутри метки span с текстом «n Stars», который будет скрыт от видящих пользователей.

Кроме того, подход с обратным порядком в HTML-источнике + display:row-reverse делает клавиатуру неудобной для выставления рейтингов. Доступность Flexbox и клавиатуры — довольно сложная тема, но ближе всего к решению подход, когда для каждого элемента добавляется тег aria-flowtotag, что, по крайней мере, устраняет проблему для некоторых экранных дикторов + комбинации браузеров.

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

Предыдущий элемент css

Возможно ли в css выбрать предыдущий элемент?

Нельзя, но можно сделать костыль (браузер должен поддерживать CSS flexible boxes).

Выводишь элементы контейнера на страницу в обратном порядке. Т.е. разметка должна быть такой:

Затем с помощью режима flexbox указываешь, чтобы элементы контейнера отображались в обратном порядке (минус на минус даёт плюс). Потом просто используешь adjacent selector.

demo (меняешь :hover на свой класс):

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

изврат какой-то. А почему джаваскриптом это нельзя сделать?

почему же нельзя, можно конечно $(‘.ativated’).prev() и на событие или че там у Вас.

Псевдокласс first-child. Как выбрать первый элемент в контейнере с помощью CSS.

Представьте себе какой-то элемент на странице, в который вложены несколько других элементов.

Это может выглядеть вот так:

Причем, количество вложенных элементов может постоянно меняться, например, программным способом (скриптами).

Если перед нами будет стоять задача применить определенные стили CSS именно к первому элементу среди списка вложенных элементов, то могут возникнуть определенные трудности.

С появлением CSS3 и модуля «Селекторы» такие обращения к элементу стали возможными.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

Синтаксис здесь простой:

Давайте вернемся к примеру, который был в начале этой заметки. Например, при реализации следующего стиля:

Этой записью мы сообщаем о том, что в родительском элементе #main, необходимо найти элемент «p», который расположен в коде выше всех.

Будет выделен «Элемент 1».

Кроме того, аналогичным образом можно выделить последний элемент в родительском. Прочитайте еще про псевдокласс last-child.

Похожие публикации:

1. Как изменить фон выбранной опции select css
2. Как изменить цвет плейсхолдера css
3. Как установить последовательный порт в arduino ide
4. Как центрировать контейнер в css