Get second CSS selector selenium vba-CodePudding

I am trying to inspect an element and I have used css selector Here's the HTML

<div >
  <div  style="text-align: right;">
    <div >
      <div  style="margin-top: 14px; padding-right: 10px;"><svg  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
         style="margin-top: 10px;"><span >الرقم الآلي للوحدة 10670235</span><br><span >العديلية - قطعة 3 - شارع عيسى عبد الرحمن العسعوسي - قسيمة 129 - منزل 19 - الدور الأرضي - الرقم الآلي للوحدة 10670235</span></div>
  </div>
  <hr  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

CodePudding user response：

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.

CodePudding user response：

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;
    }