CODEWITHSUNDEEP
htmlcss
YasserKhalil
YasserKhalil

Reputation: 9538

CSS selector partial text of span tag

I am trying to find the css selector of span tag based on specific string in its text This is part of HTML

</tr><tr valign="top">
<td colspan="16"> </td><td> </td><td colspan="2"> </td><td colspan="2"> </td><td> </td><td> </td><td colspan="9"> </td><td colspan="5" nowrap="true" rowspan="3"><table cellpadding="0" cellspacing="0" width="74px">
<tr valign="top">
<td><table cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td><span><b><font color="#000000" face="Arial" size="1">Page 1 of 4</font></b></span></td>
</tr>
</table></td>
</tr>
</table></td>

The span which I need has the string Page so I need a css selector that deals with the text of the css selector as partial text

Upvotes: 0

Views: 1227

Answers (2)

Jkarttunen
Jkarttunen

Reputation: 7621

Duplicate of: CSS to select/style first word

There is no :word selector in CSS. You are better off either changing the markup of doing this with Javascript.

Upvotes: 0

dale landry
dale landry

Reputation: 8600

Assuming you wish to style some targeted selector in reference to the string Page.

You can use Javascript to get the closest selector by definition using the closest() method.

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string.

Search all the documents selectors of a specific selector using a forEach() loop. Add a conditional that searches for a specific string, once it finds that string and gets a strict match, find the closest defined element.

Once you have the selector you wish to affect, apply your css to it using javascript.

You can now affect any defined selector within the closest() method you wish, provided it is present in the dom heading back up towards root of the document.

let n = document.querySelectorAll('SPAN'); // traverse the documents span tags
let target = "Page";

// run a forEach() loop on the node list
n.forEach(function(v,i) { 

  // conditional that searches for the string "Page" within the loop of elements
  if (v.textContent.includes(target)) { 

    // style the defined selector 'span' tags background-color to yellow
    v.closest("SPAN").style.backgroundColor = "yellow";        
    console.log(`SPAN ${i} - Match Found: ${v.closest("SPAN").outerHTML}`)
  }else{
    console.log(`SPAN ${i}: No Match found for ${target}`)
  }
})
<body>
  <tr valign="top">
    <td colspan="16"> </td>
    <td> </td>
    <td colspan="2"> </td>
    <td colspan="2"> </td>
    <td> </td>
    <td> </td>
    <td colspan="9"> </td>
    <td colspan="5" nowrap="true" rowspan="3">
      <table cellpadding="0" cellspacing="0" width="74px">
        <tr valign="top">
          <td><span>Some info here we do not want to style</span>
            <table cellpadding="0" cellspacing="0" width="100%">
              <tr valign="top">
                <td><span><b><font color="#000000" face="Arial" size="1">Page 1 of 4</font></b></span></td>
              </tr>
              <tr>
                <td><span>Some other info here we also do not want to style</span></td>
              </tr>
            </table>
            </td>
        </tr>
      </table>
      </td>
</body>

In the SNIPIT above...

v.closest("TR") => would target the closest table row tr heading towards the documents root which would be:

<tr valign="top">
  <td><span><b><font color="#000000" face="Arial" size="1">Page 1 of 4</font></b></span></td>
</tr>

OR

closest("TABLE") => would target the closest table tag heading towards the documents root which would be:

<table cellpadding="0" cellspacing="0" width="100%">
  <tr valign="top">
    <td><span><b><font color="#000000" face="Arial" size="1">Page 1 of 4</font></b></span></td>
  </tr>
  <tr><td><span>Some other info here we also do not want to style</span><td></tr>
</table>

Upvotes: 2

Related Questions