DEV Community

Cover image for Selecting Auto-Generated Content with CSS
Gabe
Gabe

Posted on

1

Selecting Auto-Generated Content with CSS

Our agency's website was recently moved from WordPress to Hubspot. As a result, our team has been chipping away at JIRA tickets tackling any bugs that may exist from the migration. With that, I was tasked with building out a new contact page for the site, we currently have a contact modal that opens and overlays on top of whatever page you are on. I've never been a fan of this approach, I've encountered some major preformance issues when opening that modal on top of any video. The contact form would run so sluggishly at times, it was almost unusable. Thankfully, the new contact form was set to live in its own page - solving our preformance issues.

While we were building out the contact form, we ran into an issue with the way HubSpot handles forms. Normally to theme elements on any site I don't build myself, I use a browsers inspector tool to select the element I need, I can then see its styles, class names, IDS, etc. Today while attempting to theme some of the INPUT elements, I realized that HubSpot autogenerates the IDs of each input on what seemed like each page refresh. This made targeting the element difficult, but as I learned, not impossible. Though it was autogenerated, the first few characters seemed to be a machine name of the INPUT field. Which brings us to our CSS selector

 div[class^="foo"]
The selector targets an element, a div in this case, that has a classname that starts with foo. Pretty useful. There's also another selector that does similar
div[class*="foo"]
The difference in this one being the carrot symbol is now an asterisk, what that does is targets a div that has a classname that contains foo.

Do your career a favor. Join DEV. (The website you're on right now)

It takes one minute and it's free.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay