This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
The :has() pseudo-class cannot be nested; :has() is not valid within :has().
<div>
<p>
<strong>I have a red and blue border in supporting browsers.</strong>
</p>
</div>/* valid */
div:has(p) {
border: 4px solid red;
}
/* valid */
p:has(strong) {
border: 4px solid blue;
}
/* invalid */
div:has(p:has(strong)) {
border: 4px solid green;
}I have a red and blue border in supporting browsers.
Using a combined selector instead of nesting :has() is valid.
/* valid */
div:has(p strong) {
border: 4px solid green;
}I have a green border in supporting browsers.
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-05T09:38:54+00:00) Day 8: nesting :has(). Retrieved from https://www.scien.cx/2022/10/05/day-8-nesting-has/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.