CSS Selector: Clicking on child element based upon value of other child element - css

Question

Here is the code snippet:
I am trying to click on Building Div based upon the title attribute value of class card-details__title.
Thanks

Answer 1

U need javascript for this.
Add the following code just before the </body> tag.
<script>
<!-- get elements from DOM -->
var titleDiv = document.getElementsByClassName('card-details__title')[0];
var detailDiv = document.getElementsByClassName('card-details__action')[0];
<!-- get title from tag -->
var titleTxt = titleDiv.getAttribute("title");
if (titleTxt==='add your condition text here'){
<!-- click the div if title matches the one you need -->
detailDiv.click();
}
</script>

Answer 2

Thanks #Charitra, I need this piece of code for automation and I tweak around and end up having a following code which go through all the listed owners and found the intended one and then click on its building link.
<!-- get the total number of elements from DOM -->
var totalOwners = document.querySelector('app-landlords-list > div > div').childElementCount;
var j=0;
for (var i = 0; i < totalOwners; i++) {
<!-- get elements from DOM -->
var titleDiv = document.getElementsByClassName('card-details__title')[i];
var detailDiv = document.getElementsByClassName('card-details__action')[j];
<!-- get title from tag -->
var titleTxt = titleDiv.getAttribute("title");
if (titleTxt=='Condition text')
{
<!-- click the div if title matches the one you need -->
detailDiv.click();
break;
}
j=j+3;
}