#foo:checked::before, input(type="checkbox") ( position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); ) #foo:checked, input(type="checkbox") + label::before ( content: url('checkbox.png.webp'); ) input(type="checkbox"):checked + label::before ( content: url('checkbox-checked.png.webp'); )
#foo refererar inte till något speciellt element, det är där för att förhindra att webbläsare implementerar de senare väljarna om de inte förstår det (eftersom de flesta webbläsare kommer att släppa hela väljaren om någon del av den misslyckas).