How do I set the values of all the components of a menu line?

[OlivierPS]

Would someone be kind enough to help me with some tricky CSS ?

It’s a problem I have in lots of parts of the interface where :hover is not sufficient, because what is hovered is a combination of different objects in a menu.

Here’s for example, the .search-suggestion dropdown menu. On each line, there’s a “suggestion-title” and a “search-suggest-info-text” :

Now, for a theme I’m refining, I need to set explicitely :

• the background-color of the line suggestion-content while it’s hovered ;
• the color of the suggestion-title while the line is hovered ;
• the color of the search-suggest-info-text while the line is hovered — in the example, I’d like to make it more legible.

I’ve tried :

@media (hover: hover) {
  .search-suggest-info-text:hover {
  	color:				lime;	/*	just to easily spot wether it works	*/
	background-color:	var(--background-modifier-hover);
  }
}

I can’t figure what selectors to use… This is above my CSS knowledge. So, if any CSS wizzard is willing to help me, I’d be very greatfull.

Thank you very much in advance

Olivier 😃

[ariehen]

Yeah, there’s a lot going on there in that little space. Maybe you can use/adjust some of this?

.suggestion-container.mod-search-suggestion .suggestion-item.is-selected:hover {
    background-color: black;
}

.suggestion-container.mod-search-suggestion .suggestion-item.mod-complex .suggestion-title:hover {
    color: yellow;
    background-color: grey;
}

.suggestion-container.mod-search-suggestion .search-suggest-info-text:hover {
    color: orange;
    background-color: blue;
}

[holroy]

Wouldn’t it be better to hover on the outer element, and use nested CSS to target the different parts? It should in theory make for a more consistent appearance when hovering the line.

[ariehen]

@holroy Oh yeah, there’s probably a few ways of doing it.

Olivier may know or have tried similar already; I had never looked at that part of the UI before so was just poking around for fun.

[OlivierPS]

@holroy

Wouldn’t it be better to hover on the outer element, and use nested CSS to target the different parts? It should in theory make for a more consistent appearance when hovering the line.

Holroy, that’s exactly what I’m suspecting: nested CSS must be the solution. But I don’t know about it… Could you please use this as an example / tutorial? I’m very interested. Or maybe you could hint towards a good tutorial?

[holroy]

As usual when I provide CSS it’s not meant to be a visual preference or suggestion, but it should be clear what targets what.

.search-suggest-item:hover {

  &.is-selected {
    background-color: green;
  }
  
  & .suggestion-title {
    color: red;
    background-color: grey;
  }

  & .search-suggest-info-text {
    color: yellow;
    background-color: blue;
  }
}

Which displays as:

The trick to this CSS is the combination of .search-suggest-item:hover and the & ... syntax. The first selector acts as a group selector to select a given line in the search suggestions, and then when we use & ... it combines that with an even more specific selector. This way we can color the entire line independent on which part of the overall box you’re hovering.

Also note that the first variant with &.is-selected can’t have a space in there as that would make the CSS selector miss. The other variants can (and should) have that space since the other parts relates to other elements within the search suggestion line.

[OlivierPS]

Thank you so much @holroy ! That’s exactly what I was asking for. It’s so elegant !

A few days ago, I hadn’t even heard of such a thing as “nested CSS”…

For what it’s worth, here’s the implementation in my theme, with the dedicated variables :

.search-suggest-item:hover {
  &.is-selected {
    background-color: var(--color-accent-1);
  }
  & .suggestion-title {
    color: var(--OT-color-muted-on-accent-1);
  }
  & .search-suggest-info-text {
    color: var(--OT-color-on-accent-1);
  }
}

Olivier