3 ms·
I liked the colon as well but the problem is i { font-variant: italic; ::hover { color: pink; } } Is that ::hover or : :hover? As in
by graderjs 4y ago
I liked the colon as well but the problem is
i {
font-variant: italic;
::hover {
color: pink;
}
}
Is that ::hover or : :hover? As in
i::hover
Or
i :hover
I think strictly speaking it is clear (it's the first one, as : is mandatory), but it doesn't look clear.
Like
input {
border: 3000px groove purple;
color: transparent;
:::placeholder {
color: revert;
}
}
- kazinator 4y agoThe mandatory : could be followed by required whitespace, making :: a syntax error. Or the whitespace could be strongly recommended, with implementations encouraged to diagnose if it is missing, at least in ambiguous-looking situations like ::hover. (Is that a forgotten space? Or a forgotten colon?) You have a space in: border: 3000px groove purple; color: transparent; So just for consistency, you want it here: /*empty prop name*/: ::placeholder { color: revert; }
- graderjs 4y agoAh this is the problem I originally anticipated with : when I first came up with the idea too. You see the problem is then (if you force a space): div { color: blue; : :hover { color: red; } } /* (1) */ Is unable to represent div { color: blue; /:hover { color: purple; } } /* (2) */ (or if it (1) means (2) then it is unable to represent the A below) In other words you can write <div>Hi<span>there</span></div> And using the first one get a red there on hover (A). But the second one intends to get a purple Hi there on hover (B). But You can't express that because the mandatory space clashes with the CSS (implicit) descendent combinator (space).