Is there a way to select descending elements?

Question

I am working for rating with HTML/CSS.

You can check the example below.

ul {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  display: inline-block;
  padding: 5px;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

As you see, when I hover the li, I am getting sibling elements are getting red. Instead I wanted descending elements are getting red.

And I don't want my rating is displayed with inverted color - like all red but selections are gray. This is not what I wanted.

Thanks

score 8 · Accepted Answer · answered Jun 26 '19 at 05:59

8

ul {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  display: inline-block;
  padding: 5px;
  float: right;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

How about adding float: right; for ul li? I think this is the way you wanted. Thanks

answered Jun 26 '19 at 05:59

Alona

549
3
13

1

amazing! - It's working fine. thanks @Alona – George Wang Jun 26 '19 at 06:00
1

@GeorgeWang—note that this reverses the order of the elements vs the OP. Also they're all siblings, not descendants (but I found that part of your quesiton confusing). – RobG Jun 26 '19 at 06:10

score 2 · Answer 2 · answered Jun 26 '19 at 06:13

2

ul {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

ul li {
  color: gray;
  padding: 5px;
}

ul li:hover, li:hover ~ li {
  background-color: red;
  color: white;
}

<ul>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
  <li>@</li>
</ul>

How about using flex? It provides row-reverse. Thanks

answered Jun 26 '19 at 06:13

G. Tantiba

29
4

This is also the good way. But not I wanted. – George Wang Jun 26 '19 at 06:14

score 0 · Answer 3 · answered Jun 26 '19 at 06:04

0

Here's an alternative method, in case the order of ratings must be left intact.

I'm setting all ratings to "selected" when the <ul> is hovered over.
Then, I set siblings that follow the hovered <li> element back to "unselected".

ul {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

ul li {
  color: gray;
  padding: 5px;
}

ul:hover li {
  background-color: red;
  color: white;
}

li:hover ~ li {
  background-color: transparent;
  color: gray;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

answered Jun 26 '19 at 06:04

showdev

28,454
37
55
73

1

And I don't want my rating is displayed with inverted color - like all red but selections are gray. This is not what I wanted. @showdev – George Wang Jun 26 '19 at 06:06
@GeorgeWang Sorry, I'm not sure what you mean. The result is the same as the answer you said worked for you. – showdev Jun 26 '19 at 06:07
1

The way I want is not - `all red but sibling is gray`. The way I want was - `only sibling is red`. Maybe this helps you? – George Wang Jun 26 '19 at 06:09
1

I'm not sure what you mean by "sibling". All of the `
` elements are siblings of each other. In my example, if you hover over element #3, then elements #1-3 are turned red with white text and elements #4-5 remain white with gray text. It's the same behavior as the other answer, just a different method. It seems you might want something different, but I'm not understanding.

showdev

Jun 26 '19 at 06:13

1

@GeorgeWang—all the LIs are siblings, hovering doesn't change that. This does exactly what Alona's answer does, but keeps the elements in their expected order rather than reverses them. – RobG Jun 26 '19 at 06:14

score -1 · Answer 4 · answered Jun 26 '19 at 06:03

-1

Try with below code :

let li = document.getElementsByTagName('li');
for (let itm = li.length; i-- ;) {
   // reverese li are available here. put your logic here like below
   // li[i].parentNode.appendChild(li[i]);
}

answered Jun 26 '19 at 06:03

Dheeraj Kumar

146
1
10

Is there a way to select descending elements?

4 Answers4