JSFiddle - React, Tailwind, and code Playground
HTML
<dl>
<dt data-date="Fri, 30 Jun 2017 12:17:17 +0000">30 июня, 12:17</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 11:22:43 +0000">30 июня, 11:22</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 11:15:30 +0000">30 июня, 11:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 13:37:17 +0000">30 июня, 13:37</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 14:24:43 +0000">30 июня, 14:24</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 13:15:30 +0000">30 июня, 13:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
</dl>
<dl>
<dt data-date="Fri, 30 Jun 2017 12:17:17 +0000">30 июня, 12:17</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 11:22:43 +0000">30 июня, 11:22</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
<dt data-date="Fri, 30 Jun 2017 11:15:30 +0000">30 июня, 11:15</dt>
<dd><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing.</a></dd>
</dl>
CSS
.newest-1 + dd a, .newest-1 a { color: green }
.newest-2 + dd a, .newest-1 a { color:red }
JavaScript
function colorDate(list) {
var nodes = list.querySelectorAll("[data-date]");
Array
.from(nodes, node => ({
date: new Date(node.dataset.date),
node
}))
.sort((left, right) => left.date > right.date ? -1 : 1)
.forEach((x, i) => {
x.node.className = "newest-" + (1 + i);
});
}
Array.from(document.querySelectorAll("dl, ol, li"), colorDate);