How to find descendant Child from webelement in css - css

Question

<div id='test' /><div>
In the above example, I need to find div under below scenario:
WebElement
divelement = driver.FindElement(By.css("#test"));
Now I want to find the div tag with no attribute using the divelement variable.
How to navigate to div descendant using divelement?

Answer 1

There are a couple ways you can do this.
By using a CSS Selector:
driver.findElement(By.cssSelector("#test div"))
// ^ note the space. this is CSS for "descendant".
I'm confused by the phrasing of
find the div tag with no attribute using the divelement variable.
but if you mean a <div> element with no specific attributes, then you can use the :not() pseudo-selector.
driver.findElement(By.cssSelector("#test div:not([id])")
// will find all <div>s that are descendants of #test that do not have an id attribute.
The other way, is to just use chained findElement's like so:
driver.findElement(By.cssSelector("#test")).findElements("div")

Answer 2

divelement.findElement(By.css("div"));
That should be the way to go. That was listed in the comment above from #Sudharsan Selvaraj

Answer 3

If you know the use of double slash // in Xpath and looking for its counterpart in CSS, then you need to use space.
For example: You want CSS for grey line then it will be .image .row.width-for-gray-line
<div class="image parbase wq-GridColumn wq-GridColumn--default--12">
<div class="component">
<div class="row bottom-buffer">
<div class="col-sm-12">
<a href="https://msn.com" target="_blank">
<picture>
<img src="/image/path/cover.jpg"
class="image-max-width-responsive" alt="test_alt_text">
</picture>
</a>
<p class="light-txt">test_caption</p>
</div>
</div>
<div class="row width-for-gray-line">
<hr class="bottom-buffer-gray-line">
</div>
</div>
</div>