Pinegrow Community Support Forum

How to create descendant selector?

#1

How can I create descendant selector in CSS stylesheet?
This is what I need.

.float-container {
  border: solid 1px #ccc;
  position: relative;
}
.float-container input {
  border: none;
  outline: 0;
}

When I go to Add class and write .float-container input in the box, Pinegrow just adding them into an element as class names.
I also tried directly writing selectors into css file, but in inspector panel I don’t see both selector, but only the first one. Does it mean Pinegrow does not support working with descendant selectors?

#2

It seems not. Give the feature request a plus 1.,

#3

to clarify, PG does use the selectors properly and fully supports the CSS3 standard in how it renders and behaves.

what’s missing is the same level of GUI access for these things as PG currently has for single selectors in the styles and active tabs.

if you use combinators in your CSS it will show under the styles.css tab and you can edit it there, but it will not show up in the ACTIVE tab as it should.

#4

For me it works as expected.
I select the input element from the tree.
From the styling “Active” tab I put “.float-container input” into the box and click “Create”
Now under the “Style attribute” dropdown I can select that rule.
image
I can then go to the visual editor and add rules
image
Changing the tree element to the float container makes the attribute go away, switching back to the input makes it appear

This is the same for the child combinator - create the selector anywhere in your tree - when you select an element in the tree that matches the rule you can use the visual styling

#5

i stand corrected.

i thought i checked this when i upgraded to 5.8 and it was still not working, but it seems to work now. yea team!

now if i could still get that :checked pseudo state included in there with the rest of them on the ACTIVE tab :wink: