FindElement - nested span class in div class

Question

I need to identify the "X" (cancel) button. HTML looks like this:

<div class="ingredients-container-header">
<div class="ingredients-container-header-name">Ingredients:</div>
<div class="ingredients-container-header-close">
<span class="material-icons cancel-icon " style="color: rgba(0, 0, 0, 0.87); position: relative; font-size: 24px; display: inline-block; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;">cancel</span></div></div>

Tried to do it directly on a range, but it doesn’t work (the problem may be that it is not unique (many cancel buttons have the same range)

driver.FindElement(By.XPath("//span[@class ='material-icons cancel-icon')]"));

What you need to do is go through the class: "components-container-header-close", and then somehow "go down" to the span. Can someone tell me how to do this? (1 parent and multiple children, selecting one child)

Answer 1

You can use this Xpath :

//div[text()='Ingredients:']/following-sibling::div/span[contains(@class,'cancel-icon')]

cssSelector will be:

div[class^='ingredients-container']+div>span  

try one of them!

Answer 2

//div[@class='ingredients-container-header-close']/span[@class='material-icons cancel-icon ']. .