Kevin Powell - Community•2mo ago

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 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.

jools-r

CodePen

Test case: unwrapped div content causes extra grid row

...

7 Replies

Simon•2mo ago

I haven't put much thought into it yet, but you can select all following siblings of an element using ~. Like .last-known-element ~ *. Maybe someone shows up with a more elegant way

Chris Bolson•2mo ago

The problem is that the colons aren't wrapped in any sort of element so as to be able to select them. Aswell as making the color transparent, you could also set the font-size to 0 and then reset it for the elements in the same was as you reset the color.

Simon•2mo ago

yep sorry, I've completely misinterpreted and overlooked the « colons ». I believe Chris presented a good option since there is no hack-ish way to do it. These text nodes are neither :empty nor :not(:empty). If anything, a snippet of javascript could at least find and wrap nodes …

ἔρως•2mo ago

yeah, setting the font to 0 and then setting it to 1rem is the best option

joolsOP•2mo ago

Thanks all! That indeed does achieves what I wanted, at least in terms of the look (and why I didn't already try that escapes me, because I use the same technique already to hide the “Optional:” text in the second input's label). I've updated the codepen to show the working state. Interestingly, it doesn't actually remove the extra grid row, it just collapses it to zero height. If you add grid-row-gap to the codepen, it adds the gap. Thanks again! Side note: am I right in assuming/concluding one cannot actually target these unwrapped content with a selector, without affecting the desired child elements?

ἔρως•2mo ago

you are correct, you cant target text nodes with css

MarkBoots•2mo ago

if you dont want an extra row, but dont mind an extra column

grid-template-columns: 3fr 2fr 1fr 0;
grid-template-areas: 
  "label_one label_two blank blank"
  "input_one input_two button button";

grid-template-columns: 3fr 2fr 1fr 0;
grid-template-areas: 
  "label_one label_two blank blank"
  "input_one input_two button button";

then the colons will go in to the blank areas the button will be spanned over 2 columns with a column gap tho

Gaming

Programming

How to target unwrapped content in a div?

Did you find this page helpful?