Get second CSS selector selenium vba - html

Question

I am trying to inspect an element and I have used css selector
Here's the HTML
<div class="MuiPaper-root MuiPaper-elevation0 jss325 MuiPaper-rounded">
<div class="MuiPaper-root MuiPaper-elevation1 jss329 MuiPaper-rounded" style="text-align: right;">
<div class="MuiGrid-root MuiGrid-container">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-2" style="margin-top: 14px; padding-right: 10px;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" style="cursor: pointer;"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg></div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-9" style="margin-top: 10px;"><span class="MuiTypography-root jss330 MuiTypography-body1">الرقم الآلي للوحدة 10670235</span><br><span class="MuiTypography-root jss331 MuiTypography-body1">العديلية - قطعة 3 - شارع عيسى عبد الرحمن العسعوسي - قسيمة 129 - منزل 19 - الدور الأرضي - الرقم الآلي للوحدة 10670235</span></div>
</div>
<hr class="MuiDivider-root" style="margin-right: 30px; margin-left: 30px;">
</div>
</div>
I have tried the following css selector span.MuiTypography-root but I found multiple instances. How can I get the desired one only?
The desired text is after the element MuiTypography-root jss331 MuiTypography-body1
I can't use this jss331 as this is created dynamically

Answer 1

You can add more specifiers by just chaining:
span.MuiTypography-root.jss331
This will get any span with classes MuiTypography-root and jss331.
You can chain more as needed.
PS: you can test out selectors by hitting ctrl + f while inspecting the elements. You can type in text to find, CSS selectors, and XPath if I remember correctly
Edit: if a class is dynamic then we have to go by what we know is consistent. If we can assume it will always be the last-child then you can use span.MuiTypography-root:last-child
Or if it's always the third child then span.MuiTypography-root:nth-child(3)
Or (if it's always the second span with the MuiTypography-root class) in whatever app you're using selenium, you can use the find_elements_by_css_selector method, which returns an array, and access the second element found.

Answer 2

So you want to inspect this one MuiTypography-root jss331 MuiTypography-body1
Did you tried this:-
span.MuiTypography-root:last-child{
border: 1px solid;
background-color: gold;
}