1

I need to add a top-margin to an element that's inside a list, but only when it has text content above it.

For example, the html I'm working with looks a bit like this:

<li>
   Some text
   <table> ... </table>
</li>
<li>
    <table> ... </table>
</li>

In the first list element, I would want to select the table, and leave the second list element's table untouched. Usually, I'd use something like li > table:not(:first-child), but that just selects both tables as that "Some Text" isn't actually an element.

I don't have control of the html in this situation-- so changing that is out. How can I select only the table that's below text? Am I on a wild goose chase for this functionality?

Mary Jo
  • 11
  • 2
  • "*`li > table:not(:first-child)`...just selects* both *tables.*" - it shouldn't, for exactly that reason; to select a `` preceded by text that text would either have to be wrapped in an element or have an element (possibly empty) inserted ahead of, or after, the text in order for there to be something for CSS to work with. There is, of course, JavaScript to add a style or add those element(s) into the HTML.
     – David Thomas Jan 05 '22 at 22:27
  • According to [this](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) answer, there is no such ability. Maybe you can use JS for it? – Nikita Skrebets Jan 05 '22 at 22:29

0 Answers0