Так я это сделал
function timeFromSecs(seconds)
{
return(
Math.floor(seconds/86400)+'d :'+
Math.floor(((seconds/86400)%1)*24)+'h : '+
Math.floor(((seconds/3600)%1)*60)+'m : '+
Math.round(((seconds/60)%1)*60)+'s');
}
timeFromSecs (22341938) вернет '258d 14h 5m 38s'
Нет, селектор «предыдущего сиблинга» отсутствует.
В соответствующей заметке ~
используется для общего брака-последователя (это означает, что элемент появляется после этого, но не обязательно сразу после) и является селектором CSS3. +
для следующего родного брата и является CSS2.1.
См. Комбинированный смежный блок-класс из Селектора уровня 3 и 5.7 Смежные селекторные ролики из Каскадные таблицы стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация .
В настоящий момент нет официального способа сделать это, но вы можете использовать небольшой трюк, чтобы достичь этого! Помните, что это экспериментально, и у него есть некоторые ограничения ... (проверьте эту ссылку , если вы беспокоитесь о совместимости с навигатором)
Что вы можете сделать, это использовать селектор CSS3: псевдо classe nth-child()
#list>* {
display: inline-block;
padding: 20px 28px;
margin-right: 5px;
border: 1px solid #bbb;
background: #ddd;
color: #444;
margin: 0.4em 0;
}
#list :nth-child(-n+4) {
color: #600b90;
border: 1px dashed red;
background: orange;
}
<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
<span>1</span><!-- this will be selected -->
<p>2</p><!-- this will be selected -->
<p>3</p><!-- this will be selected -->
<div>4</div><!-- this will be selected -->
<div>5</div>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
К сожалению, нет «предыдущего» селектора, но вы можете , возможно, получить тот же эффект, используя позиционирование (например, float right). Это зависит от того, что вы пытаетесь сделать.
В моем случае я хотел получить первую 5-звездочную рейтинговую систему CSS. Мне нужно было бы покрасить (или поменять значок) предыдущих звезд. Если плавать каждый элемент вправо, я по сути получаю тот же эффект (html для звезд, таким образом, должен быть записан «назад»).
Я использую FontAwesome в этом примере и заменяю между юникодами fa -star-o и fa-star http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML: (40)
Уровень 4 выбора вводит :has()
(ранее индикатор объекта !
), который позволит вам выбрать предыдущего брата с:
previous:has(+ next) {}
... но в время написания, это некоторое расстояние, выходящее за пределы кровопускания для поддержки браузера.
У меня был тот же вопрос, но потом у меня был момент «духа». Вместо записи
x ~ y
напишите
y ~ x
Очевидно, что это соответствует «x» вместо «y», но отвечает «есть ли совпадение?». вопрос и простой обход DOM могут привести вас к правильному элементу более эффективно, чем цикл в javascript.
Я понимаю, что исходный вопрос был вопросом CSS, поэтому этот ответ, вероятно, совершенно не имеет значения, но другие пользователи Javascript могут споткнуться на вопрос через поиск, как я.
В зависимости от вашей конкретной цели существует способ достижения полезности родительского селектора без использования одного (даже если бы он существовал) ...
Скажем, у нас есть:
<div>
<ul>
<li><a>Pants</a></li>
<li><a>Socks</a></li>
<ul>
<li><a>White socks</a></li>
<li><a>Blue socks</a></li>
</ul>
</ul>
</div>
Что мы можем сделать, чтобы блок Socks (включая цвета носка) выделялся визуально с использованием интервала?
Что было бы неплохо, но не существует:
ul li ul:parent {
margin-top: 15px;
margin-bottom: 15px;
}
Что существует:
li > a {
margin-top: 15px;
display: block;
}
li > a:only-child {
margin-top: 0px;
}
Это устанавливает, что все привязные ссылки имеют верхний край 15px и сбрасывают его обратно на 0 для тех, у которых нет элементов UL (или других тегов) внутри LI.
У меня была аналогичная проблема, и выяснилось, что вся проблема такого характера может быть решена следующим образом:
, и таким образом вы сможете стилизовать свои текущие предыдущие элементы (все элементы переопределены текущими и следующими элементами) и ваши следующие элементы.
пример:
/* all items (will be styled as previous) */
li {
color: blue;
}
/* the item i want to distinguish */
li.milk {
color: red;
}
/* next items */
li ~ li {
color: green;
}
<ul>
<li>Tea</li>
<li class="milk">Milk</li>
<li>Juice</li>
<li>others</li>
</ul>
Надеюсь, что это кому-то поможет.
Если вы знаете точную позицию, будет работать исключение из всех следующих братьев :nth-child()
.
ul li:not(:nth-child(n+3))
Что бы выбрать все li
s до третьего (например, 1-го и 2-го) , Но, по-моему, это выглядит уродливым и очень плотным.
Вы также можете выбрать n-й-правый справа налево:
ul li:nth-child(-n+2)
Что делает то же самое .
Я нашел способ сфокусировать всех предыдущих братьев и сестер (напротив ~
), которые могут работать в зависимости от того, что вам нужно.
Допустим, у вас есть список ссылок и при падении на одном, все предыдущие должны стать красными. Вы можете сделать это следующим образом:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
order
схем flex и grid. В приведенных ниже примерах я сосредоточусь на flexbox, но те же понятия применимы к Grid.
С помощью flexbox можно смоделировать предыдущий селектор сиблинга.
В частности, свойство flex order
может перемещать элементы вокруг экрана.
Пример:
Вы хотите, чтобы элемент A загорелся, когда элемент B зависает.
blockquote><ul> <li>A</li> <li>B</li> </ul>
ШАГИ
- Сделайте контейнер
ul
гибким.ul { display: flex; }
- Отменить порядок братьев и сестер в надписи.
<ul> <li>B</li> <li>A</li> </ul>
- Используйте селектор для подключения к элементу A (
~
или+
).li:hover + li { background-color: red; }
- Используйте свойство flex
order
, чтобы восстановить порядок братьев и сестер на визуальном дисплее.li:last-child { order: -1; }
... и voilà! Предыдущий родитель (или, по крайней мере, имитируемый) родился [или g28]
Вот полный код:
ul { display: flex; } li:hover + li { background-color: red; } li:last-child { order: -1; } /* non-essential decorative styles */ li { height: 200px; width: 200px; background-color: aqua; margin: 5px; list-style-type: none; cursor: pointer; }
<ul> <li>B</li> <li>A</li> </ul>
Из спецификации flexbox:
5.4. Порядок отображения: свойство
order
Элементы Flex по умолчанию отображаются и выкладываются в том же порядке, что и в исходном документе. Свойство
order
можно использовать для изменения этого заказа.Свойство
blockquote>order
управляет порядком, в котором элементы гибкости появляются в контейнере flex, назначая их порядковым группам. Он принимает одно значение<integer>
, которое указывает, к какой порядковой группе принадлежит элемент flex.Начальное значение
order
для всех элементов flex равно 0.Также см.
order
в спецификации CSS Grid Layout spec .
Примеры «предыдущих селекторов севера», созданных с использованием свойства flex
order
.
.container { display: flex; } .box5 { order: 1; } .box5:hover + .box4 { background-color: orangered; font-size: 1.5em; } .box6 { order: -4; } .box7 { order: -3; } .box8 { order: -2; } .box9 { order: -1; } .box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered; font-size: 1.5em; } .box12 { order: 2; } .box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered; font-size: 1.5em; } .box21 { order: 1; } .box21:hover ~ .box { background-color: orangered; font-size: 1.5em; } /* non-essential decorative styles */ .container { padding: 5px; background-color: #888; } .box { height: 50px; width: 75px; margin: 5px; background-color: lightgreen; display: flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; }
<p> Using the flex <code>order</code> property to construct a previous sibling selector </p> <div class="container"> <div class="box box1"><span>1</span></div> <div class="box box2"><span>2</span></div> <div class="box box3"><span>3</span></div> <div class="box box5"><span>HOVER ME</span></div> <div class="box box4"><span>4</span></div> </div> <br> <div class="container"> <div class="box box9"><span>HOVER ME</span></div> <div class="box box12"><span>HOVER ME</span></div> <div class="box box6"><span>6</span></div> <div class="box box7"><span>7</span></div> <div class="box box8"><span>8</span></div> <div class="box box10"><span>10</span></div> <div class="box box11"><span>11</span></div> </div> <br> <div class="container"> <div class="box box21"><span>HOVER ME</span></div> <div class="box box13"><span>13</span></div> <div class="box box14"><span>14</span></div> <div class="box box15"><span>15</span></div> <div class="box box16"><span>16</span></div> <div class="box box17"><span>17</span></div> <div class="box box18"><span>18</span></div> <div class="box box19"><span>19</span></div> <div class="box box20"><span>20</span></div> </div>
jsFiddle
A Side Note & ndash; Две устаревшие убеждения о CSS
Flexbox разрушает давние убеждения в отношении CSS.
Одно из таких убеждений заключается в том, что предыдущий селектор сиблинга невозможен в CSS .
Сказать, что это убеждение широко распространено, было бы преуменьшением. Ниже приведена выборка связанных вопросов только для переполнения стека:
- Выберите предыдущий родственный элемент в CSS с помощью селекторов
- CSS : выберите предыдущий sibling
- CSS выберите предыдущий sibling
- Предыдущий смежный селектор в CSS
- Выберите предыдущие братья и сестры при наведении
- Селектор CSS для перехода к предыдущему брату
- Измените цвет элементов брата на hover using CSS
- Как выбрать предыдущего брата с использованием синтаксиса selenium css
- Селектор CSS для выбора элемента, который приходит до еще один элемент?
- Как добавить стиль в предыдущий родной файл активного входа, используя только CSS
- Селектор CSS для следующих и предыдущих элементов
- Как воздействовать на другие элементы при зависании div
Как описано выше, это убеждение не совсем верно. Предыдущий сингл-селектор может быть смоделирован в CSS с использованием свойства flex
order
.Миф
z-index
Еще одно давнее убеждение что
z-index
работает только с расположенными элементами.Фактически, самая последняя версия spec & ndash; Проект редактора W3C & ndash; все еще утверждает, что это правда:
9.9.1 Определение уровня стека: свойство
z-index
z-index
- Значение: auto | | inherit
- Начальное: auto
- Применяется к: позиционированным элементам
- Inherited: no
- Процент: N / A
- Медиа: визуальный
- Вычисленное значение: как указано
(выделено курсивом)
blockquote>В действительности, однако, эта информация устарела и неточна.
Элементы, которые являются элементами гибких элементов или , могут создавать (f28)
static
.4.3. Элемент Flex Item Z-Ordering
Элементы Flex представляют собой то же самое, что и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и значения
z-index
, отличные отauto
создать контекст стекирования, даже еслиposition
-static
.5.4. Z-axis Ordering: свойство
z-index
Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и
blockquote>z-index
, отличные отauto
, создают контекст стекирования, даже еслиposition
-static
.Ниже приведена демонстрация работы
z-index
над непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/
Как уже говорилось много раз - с div ~ p
выбраны все элементы <p>
, которым предшествует элемент <div>
.
Проверьте этот список все селектор CSS.
Два трюка . В основном, инвертирование HTML-кода ваших желаемых элементов в HTML и использование ~
Оператора следующего сиблинга :
float-right
+ инвертирует порядок HTML элементы
div{ /* Do with the parent whatever you know just to make the
inner float-right elements appear where desired */
display:inline-block;
}
span{
float:right; /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:red;
}
<div>
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
direction: rtl;
+ инвертирует порядок внутренних элементов
.inverse{
direction: rtl;
display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:gold;
}
Hover one span and see the previous elements being targeted!<br>
<div class="inverse">
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
blockquote>
+
для следующего брата. Есть ли эквивалент для предыдущего брата?Вы можете использовать два селектора ax :
!
и?
Там 2 следующие селекторные функции для сиблинга в обычном CSS:
+
является непосредственным последующим селектором сиблинга~
является любым последующим селектором сиблинга. В обычном CSS нет предыдущего селектора sibling.
Однако в ax CSS послепроцессорной библиотеки есть 2 предыдущие селекторные функции:
?
- это предыдущий селектор немедленного (напротив+
)!
является любым предыдущим селектором (см.~
)Рабочий пример:
В следующем примере:
.any-subsequent:hover ~ div
выбирает любой последующийdiv
.immediate-subsequent:hover + div
выбирает немедленный последующийdiv
.any-previous:hover ! div
выбирает любой предыдущийdiv
.immediate-previous:hover ? div
выбирает непосредственный предыдущийdiv
div { display: inline-block; width: 60px; height: 100px; color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); text-align: center; vertical-align: top; cursor: pointer; opacity: 0; transition: opacity 0.6s ease-out; } code { display: block; margin: 4px; font-size: 24px; line-height: 24px; background-color: rgba(0, 0, 0, 0.5); } div:nth-of-type(-n+4) { background-color: rgb(0, 0, 255); } div:nth-of-type(n+3):nth-of-type(-n+6) { opacity: 1; } .any-subsequent:hover ~ div, .immediate-subsequent:hover + div, .any-previous:hover ! div, .immediate-previous:hover ? div { opacity: 1; }
<h2>Hover over any of the blocks below</h2> <div></div> <div></div> <div class="immediate-previous">Hover for <code>?</code> selector</div> <div class="any-previous">Hover for <code>!</code> selector</div> <div class="any-subsequent">Hover for <code>~</code> selector</div> <div class="immediate-subsequent">Hover for <code>+</code> selector</div> <div></div> <div></div> <script src="https://rouninmedia.github.io/axe/axe.js"></script>
Вы можете использовать инверсию порядка элементов в HTML. Затем, используя order
, как в ответе Michael_B , вы можете использовать flex-direction: row-reverse;
или flex-direction: column-reverse;
в зависимости от вашего макета.
Рабочий пример:
.flex {
display: flex;
flex-direction: row-reverse;
/* Align content at the "reversed" end i.e. beginning */
justify-content: flex-end;
}
/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
background-color: lime;
}
/* styles just for demo */
.flex-item {
background-color: orange;
color: white;
padding: 20px;
font-size: 3rem;
border-radius: 50%;
}
<div class="flex">
<div class="flex-item">5</div>
<div class="flex-item">4</div>
<div class="flex-item">3</div>
<div class="flex-item">2</div>
<div class="flex-item">1</div>
</div>