Selecting Multiple Elements? #2

User 2942998 Photo


Registered User
74 posts

Is there a way to select multiple elements? Example: I have the need to add a 3rd class to 35 cards, is there a way to apply the class to all the cards at once? I'm thinking no, but figured I'd ask.
User 187934 Photo


Senior Advisor
20,190 posts

No there isn't.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2942998 Photo


Registered User
74 posts

Thanks, didn't think so.

Thanks Eric
User 244626 Photo


Registered User
811 posts

You can go to the Element States Selector and use a Pseudo Class. You could use a already created Nth Child or Nth of Type (Names). Change the value of either one to nth-of-type(1n) so it applies to all the children. Then in the In State selector where you usually see Regular, Out of View, Hover, Active, Focus, and Visited a "New" selector appears named whatever you named it or left it named as (Nth of Type). Select that and set your css and it will apply to all the childs.

Lots of powerful stuff to use in the Element States Selector but not documented and rarely (if ever) talked about on the forums. The last one in the list of choices at the bottom is the dynamic class. If you know jquery and how to use the basic addclass removeclass you will quickly fall in love with this one. Sets a style when jquery adds the class....an important setting not available until CSS Grid Builder and SD3.
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,454 posts

My guess is, that the reason why it is not talked about, might be because it is unknown to a lot of us. Have you got some sources of information about this that you could share?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,190 posts

As Twinstream stated there are ways to select and apply a styling to several elements using the Pseudo Class but this will apply to future additions of the same elements. Jquery works also but has the same issues. If you need these cards to be on their you may want to add a class to those or add a different class to future cards to override the Pseudo Class. Lots of ways to achieve the need in the way of styling. I was reading the post as a way to actually select the elements in SD and add a class to them within it app.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2942998 Photo


Registered User
74 posts

You are on track Eric.

I made a card on the index page and saved it as a component to use for course outlines in 3 categories (around 30 cards) and everything was fine until I touched it, I made a small change on 1 card on the index page and it threw off the text on a bunch of cards in the course outline. I will say this happed because I didn't follow best practices as far as defining classes so I had to go back and add a 3rd class for the outline cards to get the formatting correct. This is why I was asking, I was thinking Shift+Click select multiple elements and done. It wasn't too bad to change them individually though.

It would be really nice if the interface had the ability to dock panels (exp. Adobe CC) so you didn't have to go back and forth between elements and styles.

I am a work in progress so lesson learned, I appreciate everyone's coaching and input.
User 187934 Photo


Senior Advisor
20,190 posts

Maybe in the future CC will allow us to select elements with the tree and apply a class to them.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

Well in this case I should have not mentioned Nth of Type because Nth Child would be the method to use. Sorry about that. Nth Child still works though.

Here are two tree structures using random backgrounds using the Pseudo Class which was easily added to multiple elements and css styling applied. 1n 2n 3n

https://gluexp.coffeecup.com/index.html

And the only documentation I can remember was Bob using it in some CSS Grid example....I cant find it now after searching everywhere.
Bootstrap 5 CSS Grid.
User 2885740 Photo


Registered User
60 posts

Very good info, Twinstream.
In the attached RSD-file I tried it out. In the emelement state selector I defined a pseudo class "nth-child" for the odd and one for even rows. By doing so I managed to give the child-containers different background colors.
Another way of working with the element state selector we can find in the template "Coffeeshop Homepage". The container "support-dialog" has a custom dynamic class called "show-dialog".
Nice !
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.