Style all `selected` rows of the currently focused `GtkListBox`

Platform
1

Is there a way to style all selected rows of the currently focused GtkListBox?

simply using row:selected would also style rows from other (not-focussed) GtkListBoxes.

Note
This is essentially the same question as this one, but with more concise wording.

2

Remember it’s a CSS selector, so you can match elements within elements

3

Can you explain a little further? I’m really stuck here :frowning:

4

I created a fiddle here to make an example of the problem in html:

https://jsfiddle.net/sgkjx4yo/

Or the source code here:

<!DOCTYPE html><html><head>  <meta charset='utf-8'/>  <title></title>
<style>
  .list{
    border: 1px solid black;
    padding: 5px;
    width: 250px;
  }
  .row{
    border: 1px solid black;
    padding: 5px;
  }
  .selected{
    background-color: rgb(197, 197, 197);
  }
  .focussed{
    background-color: rgb(110, 214, 255);
  }

</style></head><body>

<b>list 1</b>
Has selected items and widget is focused.
All selected items should be highlighted like the focused one.

<div class="list">
  <div class="row selected"> row 1</div>
  <div class="row"> row 2</div>
  <div class="row selected"> row 3</div>
  <div class="row"> row 4</div>
  <div class="row selected focussed"> row 5</div>
  <div class="row"> row 6</div>
  <div class="row selected"> row 7</div>
  <div class="row"> row 8</div>
  <div class="row"> row 9</div>
</div>

<br><br><br><br>

<b>list 2:</b>
Has selected items, but widget is not focused.

<div class="list">
  <div class="row selected"> row 1</div>
  <div class="row"> row 2</div>
  <div class="row selected"> row 3</div>
  <div class="row"> row 4</div>
  <div class="row selected"> row 5</div>
  <div class="row"> row 6</div>
  <div class="row selected"> row 7</div>
  <div class="row"> row 8</div>
  <div class="row"> row 9</div>
</div>


</body>
</html>
5

@zbrown Now I think I understand what you meant, but I think this won’t work. You say “match elements within elements”, but I need to match siblings, not children. And a GtkListBox aka list (in CSS) does not provide clues to if a row is focused or not.

6

Have you tried the :focus-within pseudo-class on the list? Something like list:focus-within row:selected.

7

Thank you! :focus-within works (on GTK4).

I guess GTK3 does not offer a solution, so I can only hope people will upgrade within the next 15 years :smiley:

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.