Webstudio

Log inLog into community

Join the Webstudio community

Updated 4 months ago

Style combinations of css pseudo classes?

Style combinations of css pseudo classes?

At a glance

The post discusses the possibility of combining CSS pseudo-classes (such as :hover and :visited) in the Webstudio UI, similar to the CSS example provided. Community members discuss the current limitations, with some suggesting the use of CSS variables as a workaround. The community members also explore a real-world use case where the active navigation link should have a different hover effect than non-active links, and a mockup is shared to illustrate this. While the community members initially thought this feature was not available, they eventually create an issue to request the implementation of this functionality in Webstudio.

Useful resources

·

In CSS, we can do something like this:

Plain Text

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

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

Will this be possible in the UI at some point (where .current-page would be equivalent to the Webstudio "Current Page" state)?

J

p

O

35 comments

I don't think it's possible to do combinator selectors at the moment. You can use tokens to handle hover and visited though. The navigation has a current page identifier as well.

Thanks. I created an issue in case it's something the devs want to add at some point https://github.com/webstudio-is/webstudio/issues/4094

Nested styling will be possible via css variables

We won't be implementing Nested selectors, too many side effects

Hi Oleg, it's not the nesting that I was asking about, and sorry for not making that more clear.

I should have shared this code instead: a:hover:visited and a:hover.current-page to make my point. I'm really just asking about combinations of pseudo-classes (states) in the UI.

what do you mean by combinations of pseudo states

you can right now define styles on hover, current page and visitors all at the same time

oh you mean styling current page state only on hover?

and styling visited only on hover?

yes exactly

easily done in CSS, but just wondering if it might be done in the UI, perhaps with a multi-select in the dropdown

Yeah this is something we have discussed a while ago to enable but never decided on the UX, its kinda rare that you would need these

one option could be providing a way to select both in the dropdown (checkbox or something else and make a combined state)

honestly in all my years of writing CSS I have never needed this in code, can you show a real world use case?

Yeah, that would be great. My use case right now is that for the active link in the nav, I want a different hover effect than on non-active links. Stuff like that

do you have a design or something to show? I want to see that it makes visual sense. Its kinda hard to imagine.

i'll share a mockup in a few minutes

Here's a simple mockup:

published: https://nov-hover-active-tab-tf8u9.wstd.io/

project: https://p-152190b5-1f6e-4105-b851-641f2959968a.apps.webstudio.is/?authToken=a9dbaa45-3f69-41d8-952c-18b095f9368b&mode=preview

was it meant to show :hover:visited or :hover:current-page state differences? because it looks all the same

hover:current-page. Hovering over the current-page item produces a different box-shadow than hovering over other items

ah, didn't notice at first

and its even logical

created an issue for it https://github.com/webstudio-is/webstudio/issues/4099

woo hoo!

thank you!

I actually thought we had that issue, but couldn't find it

Yeah, I looked for something similar before posting, but didn't find one.

I don't know if you looked at the builder link, but was I correct that the second embed code (which I disabled so as not to add confusion) will always require css, because of inheritance? Or is there the potential for something like cascading for tokens in the future?

Plain Text

<style>
    nav ul {
    &:hover, &:focus, &:focus-visible, &:focus-within {
      li a[aria-current=page] {
        box-shadow: var(--nav-thin);
      }
    }
  }
</style>

that's what I was talking we will do with variables

you can define values on parent, then use them in the child

tokens are like classes without the cascade and selectors, because these create problems

Oh, ok gotcha. Makes sense, I hadn't thought about vars that way

was it because webflow only allows them on the global element?

No, I've barely used webflow. I just hadn't thought about vars as a workaround for cascading styles before, even though I've defined them before outside of :root

Add a reply

Sign up and join the conversation on Discord