Как обратиться к объекту в сss?
Как обратиться к предыдущему элементу? Немного глупый вопрос, но меня заинтересовали возможности обращения в css. Есть ли только дочерние, соседние и последовательные, или есть что то, что ускользнуло от моего внимания?
Пример: есть список и как сделать так, чтобы при наведении на .hover цвет первого и второго элемента менялся на красный?
Только так, или есть фишечки типа обращения, обратного «~»? «при наведении на .hover поменяй цвет предыдущих на красный»
- Вопрос задан более трёх лет назад
- 184 просмотра
1 комментарий
Простой 1 комментарий
Селекторы потомков. Псевдоклассы, псевдоэлементы и псевдоселекторы CSS
Псевдоселекторы, псевдоэлементы и псевдоклассы в CSS
Псевдоклассы — это селекторы, которые определяют элементы на странице не по классам, прописанным разработчиком, а по специфическому состоянию HTML-элементов. Например, когда на элемент страницы наводится курсор мыши, он переходит в специфическое состояни е . Чтобы задать обычный стиль этому элементу, мы используем какой-нибудь основной селектор, а чтобы задать стиль при наведении курсора на него, мы используем псевдокласс. При описании стилей псевдокласс а е го селектор всегда начинается с «двоеточия»:
:
>
Псевдоклассы бывают разные. Одни могут отвечать за действия пользователя на страниц е , а другие — за расположение дочернего элемента относительно родительского.
Псевдоклассы CSS, которые отвечают за действия пользователя
- «:hover». Этот псевдокласс используется , когда мы хотим задать стили элементу, на который навели курсор. В этом случае синтаксис селектора будет таким: « :hover».
- «:focus». Этот псевдокласс помогает задать стиль элементу, на котором сфокусировано внимание пользователя. Например , пользователь заполняет какую-то форму на сайте. В момент заполнения форм ы е е можно как-то выделить при помощи данного псевдокласса.
- «:link» и «visited». Эти псевдоклассы применяются исключительно к ссылкам. Первый задает стили ссылке, которую еще не посетили, а второй — ссылке, которую уже посетили.
- «:active». Этот псевдокласс используетс я в тот момент, когда пользователь активно взаимодействует с элементом страницы. Например, пользователь только нажал на ссылку или кнопку, но еще не отпустил их.
Псевдоклас с ы, которые определяют «соседство» html-элементов
- «:first-child». Этот псевдокласс всегда определяет первый элемент собственного родителя. Например, у нас есть большой текст , и мы хотим выделить в нем стилями первый абзац. В этом случа е м ы к тексту применяем данный псевдокласс и описываем стили. Псевдокласс «привязывается» не к конкретному элементу, а лишь к его расположению. Например, в начале нашего текста добавляем новый абзац — теперь он будет попадать под действие этого псевдокласса.
- «:last-child». Работает точно так же , как и первый псевдокласс, но только с последними дочерними элементами родителя.
- «:only-child». Этот псевдокласс определяет все дочерние элемент ы родительского класса, при условии что они являются единственными у своего родителя.
- «:nt h -child(номер элемента)». Этот псевдок ла сс позволяет обратиться к конкретному номеру элемента своего родителя. Например , у вас на сайте реализован список , в ы хотите выбрать конкретный пункт списка и выделить его стилями — т огда вам поможет данный псевдокласс.
Псевдоэлементы CSS
- «::after». Определяет псевдоэлемент, который появится после существующего , родительским элементом.
- «::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.
Похожие публикации:
- Как изменить фон выбранной опции select css
- Как изменить цвет плейсхолдера css
- Как установить последовательный порт в arduino ide
- Как центрировать контейнер в css