How to either select the attribute or wildcard over CSS selector

user_15242996 0
Viewed 123

I have been trying for days to figure out how to grab a value using CSS selector with no luck. I am not exactly great at this type of thing and learning through looking via Google search on how this might be done. I know how to use Chrome, inspect, and then highlight the area of a page and do a Copy selector, but my problem is that 2 parts in the selector have values that change on every refresh.

#root > div > div > div.MuiDrawer-root.MuiDrawer-docked.jss400 > div > div > div > li.MuiListItem-root.jss425.MuiListItem-gutters > div.MuiListItemText-root > span

Then after a page refresh, you can see the values change after jss in 2 spots

#root > div > div > div.MuiDrawer-root.MuiDrawer-docked.jss73 > div > div > div > li.MuiListItem-root.jss98.MuiListItem-gutters > div.MuiListItemText-root > span

For example, here you can see each time I refreshed the page, the following 2 parts change each time:

  • div.MuiDrawer-root.MuiDrawer-docked.jssXXX
  • li.MuiListItem-root.XXX.MuiListItem-gutters

Screenshot of where the values are

I am trying to figure out the proper syntax to form a selector that will return 'THIS IS MY NAME' even when the value changes in the 2 spots point after the jss of each part pointed out above. This is where I am getting the selector from:

<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">THIS IS MY NAME</span>

I was doing some Google searching trying to figure out how I could wildcard over those values or find another way of doing it. I found that you can use an attribute selector so I have been trying to figure that out, but I don't appear to be doing it correctly.

I have tried..

[class|="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"]

I also tried Element.querySelector() but again, using that I can't seem to figure out how to either just wildcard or go straight to the attribute and grab the value next to it.

Here is a pic of the complete structure

Any help would be really appreciated. Thanks all.

css-selectors attributes css
1 Answers

You probably don't need to define the selector in every detail - but if you want to, as in your first two examples, just leave out the bits that change (.jssxxx).

Here's a simple example, boiled down from your HTML, of the basic set of selectors (just the classes immediately attached to the element you are interested in). If that isn't enough to select what you want, i.e. not unique enough, add some more in before hand, but without the .jssxxx s.

const el = document.querySelector('.MuiTypography-root.MuiListItemText-primary.MuiTypography-body1.MuiTypography-displayBlock');
console.log('Selection gives: ' + el.innerHTML);
<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">THIS IS MY NAME</span>

user_108674540
Related