CSS selector partial text of span tag

Question

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

I am afraid css does not have that capability. That would be the job of javascript. — Mohamed Mufeed, Dec 08 '20 at 05:16
Does this answer your question? [CSS to select/style first word](https://stackoverflow.com/questions/55612/css-to-select-style-first-word) — Jkarttunen, Dec 08 '20 at 05:24
`var first = document.querySelector('td span b font').innerHTML.replace(/ .*/, ''); console.log(first);` - this is how you get the first word in your case. And then you can add code to assign a style. But why don't you want to wrap your word `"Page"` in an additional div `span`, and replace the first span with the `p` tag ?! — s.kuznetsov, Dec 08 '20 at 05:52

score 2 · Answer 1 · answered Dec 08 '20 at 06:51

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>

Jkarttunen · Answer 2 · 2020-12-08T06:54:39.250

0

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.

edited Dec 08 '20 at 06:54

answered Dec 08 '20 at 05:23

Jkarttunen

6,764
4
27
29

Thanks a lot. How can I get the xpath of this element ?? – YasserKhalil Dec 08 '20 at 05:45

CSS selector partial text of span tag

2 Answers2