UI for combinations of "states" (pseudo-classes) and link current-page state

[paulrudy]

If it wouldn't overcomplicate the UI, I'd like to be able to style combinations like "hover + visited", or "hover+ current page". In CSS, we can do:

a {
  color: red;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
    color: blue;

    &.current-page {
      text-decoration: initial;
      color: initial;
    }
            
    &:visited {
      color: initial;
    }
  }
}

where .current-page would be equivalent to the Webstudio "Current Page" state for links.

Perhaps a multi-select option in the dropdown for selecting states?

[kof]

Our plan is to support styling like this without relying on nested selectors, but using css variables instead, here is a css example that approach, in this example a nested element .child would become display block when parent element .parent is hovered

.parent:hover {
    color: blue;
    --icon-display: block;      
}
.child {
   display: var(--icon-display, none)
}

[kof]

The same would be with "Current Page" state on a link:

a[aria-current=page] {
    color: blue;
    --icon-display: block;      
}
.child {
   display: var(--icon-display, none)
}