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

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