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.