How to target unwrapped content in a div?
I have the following HTML code for a form output by a system I have no control over = I have to work with it. On the face of it, it's simple: two inputs each with a label and a submit button, but unfortunately it has colons as what you could call "loose text" within the containing div but between the other html tags, making it hard to target with a regular css selector.
What I've done:
* set up a css grid with named grid areas to give it some visual structure
* made the colons disappear visually by setting the container text to transparent and the contained tags back to text color.
The problem: the two 'stray' colons cause the grid layout to produce an extra row beneath the tags (look at the example below with the inspector). Here's the test case in simplified form as a codepen: https://codepen.io/jools-r/pen/dPGdzWz?editors=1100
How can I target the two colons to assign them to
What I've done:
* set up a css grid with named grid areas to give it some visual structure
* made the colons disappear visually by setting the container text to transparent and the contained tags back to text color.
The problem: the two 'stray' colons cause the grid layout to produce an extra row beneath the tags (look at the example below with the inspector). Here's the test case in simplified form as a codepen: https://codepen.io/jools-r/pen/dPGdzWz?editors=1100
How can I target the two colons to assign them to
grid-area: blank;? Or how could I achieve this layout by other means bearing in mind I can't add or change the HTML markup? I will also want to stack the layout on narrow viewports.
