Any Support for all the Pseudo-classes

:last-child, last-of-type, nth-child()…

I might have missed where it is in the Pinegrow editor. Please point it to me. Thanks.

1 Like

Hi,
There are multiple ways to accomplish this.
If you are adding your pseudo-class to an element, like all

, or if you already have a class created and attached to an element on the page, select the element and go to the Styles tab.
Click on the three dots next to the CSS rule “Create” button.


In this case I’ll added the pseudo-class to the a rule I already made for the class ‘.greener’.

First, click on the ‘.greener’ in the list. If I only wanted to target headings with a class of greener I would click both the ‘h1’ and the ‘greener’. Now click the colon after the greener class to get the pseudo-class dropdown.

Pick your pseudo-class and click “Create” and a new rulset will be created that you can edit with the visual editor. If you want to add a pseudo-element, click on the base selector and then type your pseudo-element, like ::placeholder.
If you don’t have a selector, like class, assigned to an element, you generally need to create and attach the ruleset first and then go through the same steps to add a pseudo-class. There might be a quicker way, but I don’t know it.

The other way to add rulesets is by directly editing the stylesheet code.
To do that, go to the Style tab and on the right side you will see “Stylesheets”. Click the dropdown next to it for a list of the sheets. Next, click on the code icon </> next to the stylesheet where you want to add the rule.


Hope this helps,
Bob

3 Likes

Wow. Awesome!!! Thank you so much for showing the steps with pictures. They are really helpful.

1 Like

i second this and approve.

PG has some powerful features that are not at all obvious to the uninitiated.

This little “easter egg” is a prime example.

i would still like to have 1-click access to toggle these rules on/off to see how they affect the display like we have or the 4 primary pseudo classes shown :active :hover :focus and :visited

to conserve screen real estate, they could change with the context of what you were working on or they could be configurable by the user with different “profiles” we could switch between as needed.

1 Like