Adobe DTM Selector Chain Not Working?

I'm trying to get the routing number using a data element from the code below using a CSS Selector chain and I don't know why I can't pick up the text (routing number) using a CSS Selector chain for the following code:

<table class="rich-table home table" id="startForm:PendingReviewApps" border="0" cellpadding="0" cellspacing="0"><colgroup span="0"></colgroup><thead class="rich-table-thead"><tr class="rich-table-header  "><th class="rich-table-headercell  " scope="colgroup">Accounts Being Reviewed</th></tr></thead><tbody id="startForm:PendingReviewApps:tb"><tr class="rich-table-row rich-table-firstrow "><td class="rich-table-cell " id="startForm:PendingReviewApps:0:ProductSummaryForDepositApplicationId" style="width:80%"><span id="startForm:PendingReviewApps:0:ProductLabelForDepositAppId" style="font-size:14pt;">Easy Checking</span>
    <br />
    <p style="padding-left: 20px"><span id="startForm:PendingReviewApps:0:routingNumberSpan">
    Routing number:<span id="startForm:PendingReviewApps:0:RountingNumberForDepositAppId" style="font-weight:bold;">  121100782</span>
            <br /></span><span id="startForm:PendingReviewApps:0:intFundingAmtSpan">
        Initial funding amount: $<span id="startForm:PendingReviewApps:0:InitialFundingAmountForDepositAppId" style="font-weight:bold;">100.00</span>
            <br /></span>
    </p></td></tr></tbody></table>

I've tried all types of combos but the tool I'm using (Adobe DTM) is not returning the text value (routing number)? Attached is the CSS Selector chain results I see in the dev. console of Chrome but have had no luck using! I've tried the following:

span#startForm:PendingReviewApps:0:RountingNumberForDepositAppId
p #startForm:PendingReviewApps:0:RountingNumberForDepositAppId

But had no luck?

Here is the data element

and here is a screenshot of the Chrome Dev. Console showing the CSS Selector path:

Solution

Two options:

(single) escape the colons

span#startForm\:PendingReviewApps\:0\:RountingNumberForDe‌positAppId

Ultimately DTM makes a document.querySelector() call, passing your value as the argument.

In this case, even though a colon : is a valid id character, it marks a pseudo-class in css syntax, so you must escape it.

Meanwhile, document.querySelector() takes a string argument, and backslash is a special character to strings, so you must escape the escape (so overall \\:).

However, DTM automatically escapes backslashes, so you should only escape it once in the Data Element field, and the final evaluated value will be the double escaped \\:

Use Attribute syntax

span[id="startForm:PendingReviewApps:0:RountingNumberForDepo‌sitAppId"]

This is an alternate selector using Attribute syntax. No real benefit to this vs. first method except that you don't have to worry about escaping the colons.