nav li:first-of-type u. nav li:last-of-type

[Gunnar Bittersmann]

@@Rolf B

Mit einer Weißebene:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    background: linear-gradient(0, #fff8 0%, #fff8 100%),
                url(../img/home.png) no-repeat center/auto 72%;
}

Da stehste da wie ein begossner Pudel. WET (write everything twice)

Das ist das Gegenteil von DRY (don’t repeat yourself):

#home a {
    background: var(--shade, none), url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    --shade: linear-gradient(0, #fff8 0%, #fff8 100%);
}

In trockenen Tüchern ist das aber auch noch nicht – dieselbe Farbe kommt zweimal vor.

Ginge so

#home a[aria-current=page] {
    --shade: conic-gradient(#fff8 0% 100%);
}

wenn diese komischen Gradienten im Firefox nicht noch hinter einem Flag versteckt wären.

Aber auch das ist nur ein Hack. Zukünftig soll’s so gehen:

#home a[aria-current=page] {
    --shade: image(#fff8);
}

Was man so alles bei der CSSBattle lernt …

😷 LLAP