Fout op css volgens w3c

Door Jan R op 15-01-2024 09:41 gewijzigd op 15-01-2024 09:53

3.647 views


.nosize {
    width: auto;
}
table:has(td.volgnr) {
	counter-reset: sortabletablescope;
}
table td.volgnr::before{
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
}

Ik krijg de fout

Error: Parse Error.
At line 2193, column 20

Maar zie niet waarom lijn 2193 is table:has(td.volgnr) {

Iemand inzicht?

Jan

ps kunnen we in codeblokken een startlijnnummer meegeven?

? Onbekende gebruiker

15-01-2024 12:59 gewijzigd op 16-01-2024 11:30

has() staat standaard uitgeschakeld op Firefox, ik moest het apart aanzetten in de about:config
layout.css.has-selector.enabled

Overigens geen idee waarom de CSS validator hem niet pakt. Weet je zeker dat het regelnummer klopt?
Volgens MDN accepteert has() alleen relatieve selectors of een lijst daarvan. td.volgnr is een geldige selector, had ook kunnen beginnen met een > of een + selector. Even verder zoeken nog.

[size=xsmall]Toevoeging op 16/01/2024 11:26:25:[/size]

Even getest, has() werkt prima:


<!DOCTYPE html>
<html>
<head><style> div:has(p.test) { background: red; } </style></head>
<body><div><p class="test">This is a paragraph.</p></div></body>
</html>

Ik krijg die error ook via de validator op https://jigsaw.w3.org/css-validator/validator
Het kan zijn dat het nog niet in de validator zit, omdat has() pas net is gestandaardiseerd. "Newly available" in baseline 2023, volgens MDN:


https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Anders heb ik er op het moment geen verklaring voor.

P.S.: De link heb ik met opzet in code tags omdat het niet werkt op PHPHulp.nl met url-tags vanwege de dubbele punt in de URL.

Jan R

16-01-2024 22:58

Héél zeker. :)
Ik heb dus een ticket geopend bij w3

? Onbekende gebruiker

17-01-2024 09:28

Goede actie, meteen doorpakken!

Reageren

Inloggen om te reageren