0
<table border="0" cellspacing="4" cellpadding="0">
<tr>
<td colspan="3"><strong>Billing Name</strong></td>
</tr>
</table>

I am unable to edit the HTML here- I am using a "CMS" called Luminate Online, which, when I create something like an event or survey through the tool, it automatically formats everything very horribly. I have to go back in and style everything manually using their classes/ids etc. However, sometimes things don't have classes or ids or anything I can grab on to to style. Like the above, I want to style the words "Billing Name" but I can't figure out how to isolate JUST this (because if I style the td tags or strong tags it would obviously style ALL td or strong tags which I don't want).

Is there some way to use the words "Billing Name" to isolate this in CSS for styling?

If there's not a way using CSS, would someone so very kindly be able to show me the JS or jQuery I could use? I am not experienced in those so it's hard for me. Thank you so much!

Johannes
  • 64,305
  • 18
  • 73
  • 130
RandomPerson1
  • 9
  • 2
  • Possible duplicate: https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text – Stephen R Jan 18 '18 at 18:53
  • Is it always the first td? `table tr td:first-of-type { /* your styles */ }` – StudioTime Jan 18 '18 at 19:00
  • No, can't target the tag by its content value – Huangism Jan 18 '18 at 19:00
  • You can maybe look for some other element further up in the DOM that does have an id? – Brian Glaz Jan 18 '18 at 19:02
  • 1
    You could use JS to add inline css. – Thijs Steel Jan 18 '18 at 19:05
  • I am assuming you have a bunch of these and you cannot simply target by first-child or nth-child right? – Huangism Jan 18 '18 at 19:53
  • 1
    You need to find the combination of selectors that uniquely identifies that text. Without knowing the exact circumstances, we can guess, but that's all it will be. For instance, you could use `table[border="0"][cellspacing="4"][cellpadding="0"] > tr:first-child > td[colspan="3"] > strong`, but as far as I know, you have five tables on your page with those attributes. – Heretic Monkey Jan 18 '18 at 20:09

1 Answers1

0

You can use this selector:

table[cellspacing='4'] tr > td[colspan='3'] > strong { ... }

I wouldn't use the tbody selector since I am not sure if really every browser inserts it automatically. That's also the reason that I didn't put a > between table and tr, since that way it will also apply if a tbody is present.

In addition, you can add any classes that exist, and before that, you could even add higher level elements. Another way to get more specific are :nth-child and/or :nth-of-type selectors, which in your particular example you could add to tr, td andstrong

Johannes
  • 64,305
  • 18
  • 73
  • 130