Css предыдущий элемент: css — Селектор левых соседей

Кроме того, вы можете использовать такие фильтры, как селекторы типа и nth, чтобы быть более точным на братьях и сестрах, на которых вы хотите повлиять.

С некоторым стилем это должно работать следующим образом:

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

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

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

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

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

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

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

Итак, начнем с этого:

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Выбрать предыдущий элемент

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

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

Наиболее распространенным примером может быть метка с входом .На входе : hover или : focus мы также хотели бы выделить метку , которая в данном случае стоит перед входом .

HTML :

  

 Электронная почта: 


  

Чтобы реализовать обходной путь, нам нужно немного изменить HTML. Поменяем местами input и label .Таким образом, мы можем настроить таргетинг на элемент label через родственный селектор ( + ).

HTML :

  

  
 Электронная почта: 

  

Что касается стиля, мы можем установить визуальный порядок label и input с помощью правила flex-direction: row-reverse .

CSS :

  .field {
  дисплей: гибкий;
  flex-direction: строка-реверс;
  justify-content: гибкий конец; / * для перемещения содержимого влево * /
}

.input: focus + .label {
  цвет: # 5a6cce;
}
  

Результат :

Электронная почта:

В случае, если в контейнере более двух элементов, вы можете установить свойство порядка для каждого из них, чтобы визуально разместить их один за другим. В этом случае не забудьте удалить flex-direction: reverse на элементе контейнера.

  .label {
  заказ: 1;
}

.Вход {
  заказ: 2
}
  

Последний совет: если вы работаете с input и состоянием : focus , вы можете использовать псевдокласс : focus-within для выбора желаемого элемента.В этом случае вы можете оставить HTML как есть:

  

 Электронная почта: 


  

CSS :

  .field: focus-within .label {
  цвет: # 5a6cce;
}
  

Однако, если вы выходите за рамки : hover и / или : focus указывает, что свойства flex-direction и order — это ваш основной способ выбрать предыдущий элемент-брат.

Как сделать невозможное возможным в CSS, проявив немного творчества

от Факундо Коррадини

Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше. Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

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

К счастью, как и большинство ограничений CSS, мы можем подделать .

Первое, что нужно рассмотреть, — это почему мы хотим, чтобы предыдущие братья и сестры начинались с.
На ум приходят два случая:

1. Нам нужно выбрать всех братьев и сестер определенного элемента, а последующий комбинатор ~ выбирает только те, которые идут после.
2. Нам нужно выбрать только братьев и сестер, которые были до

1. Выбор всех братьев и сестер

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

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

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

Типичным вариантом использования для этого является меню:

Приведенный выше код будет уменьшать непрозрачность всех < li> ele ment , кроме того, который завис.

Кроме того, вы можете использовать такие фильтры, как селекторы типа и nth, чтобы быть более точным на братьях и сестрах, на которых вы хотите повлиять.

С некоторым стилем это должно работать следующим образом:

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

2. Выбор того, что было раньше

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

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

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

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

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

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

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

Итак, начнем с этого:

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание о специальных возможностях

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

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

Идентичные метки «☆» не имеют смысла для программ чтения с экрана, поэтому лучше всего будет иметь внутри метки an> с текстом «n звездочек», который будет скрыт от зрячих пользователей.

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

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

одноуровневых селекторов в CSS - Сообщество разработчиков

Трудно представить веб-сайт без CSS, а в наши дни - и без JavaScript. JavaScript дает сайту больше функциональных возможностей. Но если вы новичок, вы только начали свою карьеру веб-разработчика и у вас есть творческие идеи, но у вас нет знаний JavaScript, чтобы добавить некоторые из этих функций JavaScript в свой дизайн, поэтому здесь я объясняю вам одну из этих идей, например переключаемое меню или скользящее меню панели задач, или карусельная галерея, или отзывы и все такое, что вы видели, но никогда не пробовали создавать с помощью JavaScript.
Итак, здесь я объясню вам о селекторах элементов-родственников CSS Next и Previous (да PREVIOUS).
Давайте сначала поговорим о селекторах следующих братьев и сестер: -

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

Как вы можете видеть в приведенном выше фрагменте, между тегами h2 и p находится знак + , здесь p является смежным с h2 .Теперь, если вы наведете курсор на h2, вы увидите изменение свойств тега p .

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

Как вы можете видеть в приведенном выше фрагменте, между тегами h2 и p есть вход ~ , но между тегами h3 есть еще один родственный тег, но это не повлияет, и вы можете изменить свойства Тег p , хотя p не является следующим соседним родственником h2 .
При желании вы также можете изменить свойства h3 , который находится между h2 и p , а также изменить свойства тега p .

До сих пор мы говорили о соседних селекторах, но как насчет предыдущих родственных селекторов?
К сожалению, в CSS у нас нет таких предыдущих одноуровневых селекторов, но да, в ax (ACSSSS) - синтаксисе расширенной каскадной таблицы стилей у нас есть предыдущие или предшествующие одноуровневые селекторы.

При использовании ACSSSS не забудьте добавить эту библиотеку в свой html файл: -

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Как вы можете видеть в приведенном выше фрагменте, существует ? входит между p и тегом h2 , здесь h2 является непосредственным предшествующим родственником p .Итак, теперь, если вы наведете курсор на тег p , вы увидите изменения в теге h2 .

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

Как вы можете видеть в приведенном выше фрагменте, существует ! войдите между тегами p и h2 , но между тегами h3 есть еще один родственный тег, но он не повлияет, и вы можете изменить свойства тега h2 , хотя h2 не предшествует непосредственно брат p tag.
При желании вы также можете изменить свойства h3 , который находится между h2 и p , а также изменить свойства тега p . Это будет более понятно на примере ниже: -

Чтобы узнать больше о дизайне, относящемся к этой теме, посмотрите мои ручки на CodePen.

Спасибо, что прочитали, это моя первая статья.

Любая обратная связь будет принята с благодарностью.

Свяжитесь со мной в Twitter или LinkedIn

Другой предыдущий подход к селектору-родственнику

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

Все, что мы можем сделать, это сопоставить следующего ближайшего родственника (оператор + ) или сопоставить всех следующих братьев и сестер (оператор ~ ).

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

Сценарии использования

А пока зададим вопрос: для чего нам понадобятся предыдущие селекторы? Когда мы могли их использовать?

Я думаю, что наиболее распространенным вариантом использования является «рейтинг в звездах». Когда пользователь наводит курсор на одну звезду, мы хотим, чтобы он активировал все предыдущие звезды.

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

Решения

Насколько мне известно, наиболее распространенным решением является использование свойства CSS direction: rtl . Это очень хорошо объяснено в этой статье.

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

  .element-1 {
  заказ: 3;
}
.element-2 {
  заказ: 2;
}
.element-3 {
  заказ: 1;
}
// и так далее...
  

… но я не думаю, что это хорошая идея. Он производит много кода, который в основном делает то же самое.
Вы можете добиться того же, используя flex-direction: row | column-reverse .

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

Пояснение

Ниже вы можете найти пример с рейтингом звезд на основе flexbox. Не стесняйтесь поиграть с ним:

Таким образом, вы можете поймать следующий элемент с помощью селектора + , а затем изменить визуальный порядок с помощью flex-direction: row | column -reverse .

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

Доступность

Вышеупомянутое решение изменяет только визуальный порядок, но не меняет реальный порядок в HTML-коде, поэтому нет возможности установить фокус на соответствующем элементе. Фокус будет применен от последнего видимого элемента к первому.Поэтому, если вы работаете над страницей, которая требует высокой доступности, помните об этом.

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

Подсказка: нажмите на звездочку, а затем используйте клавишу табуляции 🙂

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

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

Прочтите статью полностью на Medium ...

Образовательные цели:

1. Объясните разницу между селектором CSS и комбинатором CSS
2. Сравните и сравните «Смежный одноуровневый комбинатор» и «Общий одноуровневый комбинатор»
3. Продемонстрируйте, как использовать flex-direction и hover для имитации предыдущего родственного комбинатора
4. Продемонстрируйте, как использовать clip-path для создания звезды

Сегодня я рассмотрю простой, но удивительно мощный способ использования предыдущего дочернего селектора CSS «Hack» для создания компонента звездного рейтинга.

Справочная информация об этой статье

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

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

Основы CSS в одном GIF

Мне нравится, чтобы мои сообщения были удобными для новичков, без ущерба для продвинутого содержания.Итак, вот гифка Умара Ханса, которая затрагивает некоторые из самых основных правил CSS. Попробуйте полную ссылку здесь.

Что мы будем строить сегодня

Посмотреть код.

Я просто шучу , кто я учитель JavaScript? Мы можем сделать лучше, чем это ... Итак, давайте погрузимся в:

Как это «взлом» CSS?

Нет, это не «взлом», нарушение закона о компьютерном мошенничестве, разновидность взлома. Это незаконных и мы здесь законопослушные граждане.

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

  Если это не «хак» CSS, то определенно волшебная звезда ...
  

звездный рейтинг только с CSS:

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

  Спойлер, мы жульничаем… вот почему это «хакерство».
  

Так каковы же требования к звездочному рейтингу?

Обычно, когда вы видите эту проблему кодирования, она выглядит примерно так:

Компонент Рейтинг состоит из 5 звезд, каждая из которых представлена ​​элементом и хранится в родительском контейнере.

1. При щелчке по звездочному элементу или, в данном случае, при наведении указателя на звезду, цвет звезды должен измениться на «активный», и все начнется до того, как ее следует обновить, чтобы сделать то же самое.
2. Также звезды после желаемого рейтинга не должны иметь активного цвета.

Решение проблем с помощью CSS-селекторов, типов отображения и комбинаторов

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

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

Используя псевдоселекторы, такие как: hover,: focus,: focus-within и: checked, мы можем имитировать поведение щелчка и касания элемента в объектной модели документа (DOM) или, проще говоря, визуализированном HTML.

Хорошо, что мы можем выполнить требование №2 достаточно легко. А как насчет требования №1.
Что ж ... вот почему мы должны «обмануть», потому что на самом деле нет способа нацелить на предыдущий родственник , мы можем нацеливаться только на родительский контейнер, дочерний элемент и их родственников каскадным образом.

  Вот почему он называется таблицей стилей CASCADING, а не таблицей стилей по возрастанию.
  

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

Переписывание требований к правилам CSS

1. При наведении курсора на звезду звезда должна быть изменена на «активный» цвет, и все запускаемые после нее должны быть обновлены, чтобы сделать то же самое.
2. Кроме того, звезды перед желаемым рейтингом не могут быть стилизованы, поэтому мы бросаем детскую форму, переворачиваем чертову штуку вверх ногами и меняем порядок.
3. Обманывать пользователя (и читателя) и говорить, что это селектор Previous-Child.

Поскольку мы можем «описать представление документа»,
включает то, как мы представляем порядок элементов.
Есть несколько способов сделать это, но я расскажу только о двух из них, а второй является анти-шаблоном, и вам следует избегать его использования.Он используется только для того, чтобы вручную продемонстрировать другой способ описания происходящего.

Вариант 1. Дисплей Flex и направление гибкости

Поскольку я хочу показать его как строку, мы применим flex-direction: row-reverse; в класс .star-rating, чтобы изменить порядок каждого дочернего элемента.
Модель DOM не меняется. Мы просто меняем то, как мы это представляем.
Итак, наш документ, или HTML, записывается так:

CSS, применяемый в.star-rating class, изменит порядок каждого div.

Затем изменим цвет звезды.
Для этого я собираюсь использовать: hover, чтобы изменить цвет на выбранной звезде, и мы будем использовать общий родственный комбинатор CSS ~ вместо смежного родственного комбинатора +. Если бы мы использовали соседний комбинатор, нам пришлось бы написать:

  .star-рейтинг .star: hover,
.star-рейтинг .star: hover + .star,
.star-рейтинг .star: hover + .star + .star,
.star-рейтинг .star: hover + .star +.звезда +. звезда,
.star-рейтинг .star: hover + .star + .star + .star + .star,
.star-рейтинг .star: hover + .star + .star + .star + star + .star
{
  цвет фона: красный;
}
  

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

  .star-рейтинг .star: hover,
.star-rating .star: hover ~ .star {
  цвет фона: красный;
}
  

Это намного проще.

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

О Варианте 2 читайте в полной версии:

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

1. Прочтите исходную полную статью на Medium без стены, потому что мы друзья. И друзья, получите дружеские ссылки.
2. Вы можете внести свой вклад в эту книгу, прочитав / обсудив раздел Star-Rating.md. И, если хотите, отправьте PR, проблему и т. Д. На github и прочтите статью о уценке Star-Rating.мкр.

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

Я хочу изменить цвет фона текущего элемента li: hover и всех предыдущих элементов li в этом списке. Предположим, если я наведу курсор на 3-е li, тогда 3-й, 2-й и 1-й li должны иметь цвет фона: # 00f; , Я могу изменить фон текущего зависшего элемента li с помощью этого .Rank li: hover, но не могу понять, как я могу изменить цвет фона для предыдущих элементов этого текущего списка .Rank.,

Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами

 ул.классифицировать {
   маржа: 0;
   отступ: 0;
   список - стиль: нет;
}

ul.rank> li {
   положение: относительное;
   маржа: 0;
   высота: 30 пикселей;
   фон: #ccc;
   переход: фон - цвет 350 мс;
}

ul.rank: hover> li {
   фон - цвет: # 00f;
}

ul.rank> li + li {
    маржа сверху: 10 пикселей;
}

ul.rank> li: hover ~ li {
    фон: # ccc;
}

ul.rank> li + li: before {
   содержание: "";
   дисплей: блок;
   позиция: абсолютная;
   верх: -10 пикселей;
   слева: 0;
   справа: 0;
   высота: 10 пикселей;
} 

загрузить больше v

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

Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше.Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше. Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

загрузить еще v

Пожалуйста, подождите, пока мы проверяем ваш браузер..., Если вы находитесь в офисе или в общей сети, вы можете попросить администратора сети запустить сканирование сети в поисках неправильно сконфигурированных или зараженных устройств., Выполнение CAPTCHA доказывает, что вы человек, и дает вам временный доступ к Интернету. имущество.

 Pretag team - проблема, исправить, решить, устранить 

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

. Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше. Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

Если вы когда-либо использовали родственные селекторы CSS, то знаете, что их всего два. Комбинатор родственников + выбирает первое совпадение, которое идет сразу после, а комбинатор последующих братьев ~ соответствует всем последующим.
Но нет возможности выбрать то, что было раньше. Ни родительские селекторы, ни селекторы предыдущих братьев и сестер просто не имеют значения.

загрузить больше v

Предыдущего селектора одноуровневого не существовало. Вы не можете сделать это с помощью CSS., Кроме того, я уверен, что код, который вы предоставили, был предназначен только для демонстрационных целей, но, похоже, вы используете пользовательские элементы HTML.

 Pretag team - проблема, исправить, решить, решить 

Используя псевдоселекторы, такие как: hover,: focus,: focus-within и: checked, мы можем имитировать поведение щелчка и касания элемента в объектной модели документа (DOM ) или, проще говоря, визуализированный HTML., Когда звездочку щелкают или, в данном случае, зависают, звездочка должна измениться на «активный» цвет, и все начинается до того, как она должна быть обновлена, чтобы сделать то же самое., Но важно помнить, что на самом деле мы не стилизуем предыдущих братьев и сестер, мы стилизуем братьев и сестер после выбранной звезды и просто меняем его представление пользователю.

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

 Если это не «хак» CSS, то это определенно волшебная звезда... 

загрузить больше v

Селектор предыдущего родственника. К сожалению, в CSS нет такой вещи, как «предыдущий» селектор. Это означает, что вы не можете выбрать элемент или элементы, которые появляются в коде HTML перед вашим конкретным элементом. Почему? CSS означает каскадные таблицы стилей, а каскад похож на водопад, он идет сверху вниз. Обратного движения нет., Здесь решающее значение имеет обратное слово. Вы больше не зависите от количества элементов и можете быть уверены, что все элементы будут в обратном порядке.