I want to quickly edit the “:hover” style, but every time I need to move the mouse to the top to switch the state, and switch back to the normal state when the editing is done. The editing process is not smooth, is it possible to switch the “pseudo class” quickly like the picture shows?
“pseudo class” just show as tab, can easy switch.
Hi Lee,
Welcome to the forum and thanks for your suggestion!
What if you have more pseudo elements / classes than just the three such as:
:hover
:focus
:active
:first-child
:first-of-type
:last-child
:nth-child()
:last-of-type
:not()
:is()
:where()
:is()
:where()
::after
::before
::first-letter
::first-line
And these are only the common ones… there are many more.
With three it surely works with the buttons, as soon as there are more it surely doesn’t become clearer, does it?
Best regards,
timmse
LEFT click on “ICON” select “hover mode”
and on right click show that menu
:focus
:active
:first-child
:first-of-type
:last-child
:nth-child()
:last-of-type
:not()
:is()
:where()
:is()
:where()
::after
::before
::first-letter
::first-line
I’m afraid that would make more confusion this way.
TBH, the step we editing hover or any other mode is a little unnecessary clicks to take.
I have a suggestion.
How about like this?
If doing this way, we can bypass that icon for editing pseudo, then we can also reduce unnecessary clicks. Yeay!!
If we want to know we’re editing any pseudo elements/classes chosen from the dropdown there, the box will show a yellow border to remind us that we are editing the pseudo or hover mode.
Or when we are editing in a normal mode, the placeholder in the dropdown box just show “default”.
What do you think?
So you have to do a left/right click combo and then select with a left-click instead of two left clicks? Come on… 
Well, you still need to click twice, don’t you? Personally, I do not see a huge advantage. But definitely better than “left right left left right arrow up shift enter” (no offense Muhammad) 
Sorry, I didn’t think so much.
Is it possible to list only a few commonly used. Like me, will often switch to the “:hover” edit button and some box hover effects.
Fast switch in the element edit interface can greatly improve efficiency and make it easier to understand. The “Status” button at the top can be kept for advanced use.
Seriously, that would reduce one unnecessary click with what I suggested. Because we don’t need to have an extra step clicking on the icon to open the pseudo field, then select the pseudo from the dropdown.
Currently, whether we are styling the element with class or not, we will still need to click on the icon to open the pseudo field(this is the extra step) > then click on it to choose the pseudo.
Solution screenshot:
According to the solution, the pseudo field is already there; we can directly click on it and the dropdown for the pseudo(:hover, :active, :focus, etc.) will show automatically so we don’t need to click twice.
Even though that is just 1 step lesser, please don’t underestimate it.
When we are designing a whole website, we will save a lot of unnecessary clicks from there. In other words, it makes the workflow so much better and smoother.
Please bring this into consideration!
@jornes Also a good solution, for the commonly used, direct click to switch, other options as a drop-down list, maybe better.
I’m afraid that would also take some extra steps.
I would prefer the pseudo field located right below the class. It would be much easier…don’t need to switch.
Any pseudo-element we need to style we can just click on it and choose from the dropdown. Hehe!
Hi Jornes, don’t get me wrong, I certainly don’t want to block or underestimate the suggestions by you or other users, but merely express my personal opinion. It’s great that discussions arise from it and an idea that was perhaps not quite “round” at the beginning, thereby takes shape.
Nevertheless, we must of course find the potentially best way, and depending on the task, this is sometimes easier and sometimes considerably more complicated. That’s why we shouldn’t rush into anything.
I have definitely noticed both suggestions (yours and Muhammad’s) and as soon as we are out of the 1.3.7 stress, we will be happy to think about it.
@timmse Anyway, a quick switch to pseudo class within the element editing options would make page editing much smoother, and I’d love to hear you consider this in the future.
And you guys just created an amazing editor that I just want! Thanks.
Hey @timmse, @jornes @Lee @Silverlion009
Just to throw my hat in the ring … How about the image @lee added but rather than having three fixed buttons as that is too rigid.
Instead have two of the buttons as custom buttons which can be selected with your preferred states in Bricks settings to the two the user mostly uses i.e. Hover & Active and then the third box as either a dropdown or an input field to type in the state such as focus, nth-child, last-of-type.
I think the one that is most heavily used and one that causes the most frustration from the extra clickage is hover. So to have that available at the top of every element (below the content and style tabs as these are already sticky) would be awesome as a one-click on/off option.
Equally the ability to customize (custom buttons) to satisfy the masses if some say well I use focus and first-letter mostly then they can have that. And this would also help with @jornes option where you could type the state directly into the 3rd box.
It would also free up some real estate on the top bar (no need for the states icon) for any further introductions or usages.
Just my two cents worth.
Love all of the discussion points, there’s definitely room for improvement in regards to quicker workflow
Yes. It certainly is.
