Targeting text nodes with CSS
I'm working on the CSS for a container object. I have it mostly working. Specifically, I'm looking at test case 1, 2 and 3. They all have text nodes. Is there a way to treat a text node just like any child element?
Is there any way to tweak the CSS to get text nodes and its siblings to work nicely? Barring that is there a CSS selector to use that will select a .container if any only if there is a text node so I can display: none it (or something nicer but still to let the dev know things aren't working)?
Here is a Codepen as well.
code,
p,
quote {
display: block;
position: relative;
margin: 0;
padding: 1em;
border: 1px solid black;
box-sizing: border-box;
}
code {
background-color: #ccc;
}
p {
background-color: #0df;
}
quote {
background-color: #fd0;
}
quote::after {
display: table;
clear: both;
content: "";
}
.hidden {
display: none;
}
.third {
height: 100%;
width: 33%;
float: left;
border: 1px solid black;
}
.container {
display: block;
position: relative;
margin-right: 0;
margin-left: 0;
margin-top: 1.5em;
margin-bottom: 1.5em;
padding: 0.5rem;
border: 1px solid black;
box-sizing: border-box;
border-radius: 10px;
box-shadow: none;
}
.container >:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-width: 0;
margin-top: -0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.container >:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
margin-top: 0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.container >:not(:first-child):not(:last-child) {
margin-left: -0.5rem;
margin-right: -0.5rem;
margin-bottom: -0.5rem;
border-right-width: 0;
border-left-width: 0;
border-bottom-width: 0;
}
.container >:only-child {
border-radius: 10px;
border-width: 0;
margin-top: -0.5rem;
margin-bottom: -0.5rem;
margin-left: -0.5rem;
margin-right: -0.5rem;
}<p>p</p>
<br />
<code>code</code>
<br />
<quote>quote</quote>
<div id="0" class="container">
text
</div>
<div id="1" class="container">
<p>first child</p>
text
<code>last child</code>
</div>
<div id="2" class="container">
<p>first child</p>
text
</div>
<div id="3" class="container">
text
<p>last child</p>
</div>
<div id="4" class="container">
<p>first child</p>
<code>last child</code>
</div>
<div id="5" class="container">
<code>first child</code>
<p>last child</p>
</div>
<div id="6" class="container">
<code>first child</code>
<code>last child</code>
</div>
<div id="7" class="container">
<p>first child</p>
<p>last child</p>
</div>
<div id="8" class="container">
<code>only child</code>
</div>
<div id="9" class="container">
<p>first child</p>
<quote>middle child</quote>
<quote>middle child</quote>
<p>last child</p>
</div>
<div id="10" class="container">
<quote>
<div class="third">1</div>
<div class="third">2</div>
<div class="third">3</div>
</quote>
</div>
<div id="11" class="container">
<quote class="hidden">hidden child</quote>
<p>first child</p>
<p>last child</p>
</div>
<div id="12" class="container">
<p>first child</p>
<p>last child</p>
<quote class="hidden">hidden child</quote>
</div>Solution 1:
Only text that is wrapped in HTML tags can be targeted by CSS.
Your text that is not explicitly wrapped by HTML tags is algorithmically wrapped by anonymous boxes. These boxes may inherit styles, but they cannot be targeted by CSS.
From the spec:
The properties of anonymous boxes are inherited from the enclosing non-anonymous box. Non-inherited properties have their initial value.
If adding HTML tags around your anonymous text is not an option, consider setting the text styles on the container. For the elements that can be targeted, you can then override the container styles. Of course, this method will fall flat if you want the text to have display: none.