CSS selector always changing

Ask the community
1

I’ve successfully selected a specific element from a list block. However, I’m frustrated that the element’s ID changes every time I modify its style.

For reference, here’s the current method I use to select the element:

const titleElement = document.querySelector("h3.sw-font-size-2xl.sw-text-color-383B3D.sw-font-family-default.sw-font-weight-bold.sw-text-align-left.sw-letter-spacing-normal.sw-padding-top-none.sw-padding-bottom-7xs.sw-padding-left-none.sw-padding-right-none.sw-margin-top-xs.sw-margin-bottom-none.MuiBox-root.css-k2tx4o");

Is there a way to ensure that I can consistently select this element, even if its styles or ID change?

2

Hi,

Two ways to manage it:

For most of the element you see in the inspector, yes it’s possible. Though you need to have CSS knowledge.

Here, different possibilities (this is not the solution to your question! just a small showcase of what could be done, in general)

const titleElement = document.querySelector('.MuiBox-root > h3');

const titleElement = document.querySelector('.MuiBox-root h3:first-child');

const titleElement = document.querySelector('.MuiBox-root > h3:nth-child(2)'); /* if the h3 is the second h3 element inside MuiBoxroot for example - I use :nth-child() pseudo-class to find it -*/

const titleElement = document.querySelector('.MuiBox-root > *:first-child'); /* if you want the first text element - child element of MuiBox-root */

You stay away from CSS learning and you build your design, you stick with it, you don’t change it and you apply the code you wrote. Building an app needs a clear process where a design pattern is created and then it doesn’t change for months.

Hope it helped a bit!

1 Like
3

Honestly, the best thing would be to just get access to airtable and do this via custome code but get the data from SOFTR.

I hope that makes sense :slight_smile:

4

Nope :sweat_smile:

Airtable has nothing to do with CSS in Softr nor with the design :thinking: