[CSS] Bootstrap 5.2 naar 5.3 migratie geeft gekleurde tabel

[WoBBeL]

Voor simpele interne tooling gebruik ik Bootstrap om alles een beetje vorm te geven (en ook omdat de laatste keer dat ik zelf fatsoenlijke CSS heb geschreven in het IE6 tijdperk was ). Onlangs had ik mn Bootstrap netjes bijgewerkt van 5.2 naar 5.3 maar sindsdien zijn mijn tabellen voorzien van een witte achtergrondkleur. De oorzaak ligt bij de nieuwe feature waarmee je ook eenvoudig darkmode kunt activeren.

Bootstrap 5.2 - transparante tabel
https://imgur.com/ICcpHlW

Bootstrap 5.3 - witte tabel
https://imgur.com/MOLed1o

Met wat zoekwerk heb ik een stukje CSS gevonden die dit probleem verhelpt.

code:

.table>:not(caption)>*>* {
    background-color: #f5f5f5;
}

Waarbij f5f5f5 mijn background color is. Dit werkt prima, mn tabellen zien er nu weer goed uit.

Waar ik echter achter kwam...als ik in mn <td> een bepaalde class aanroep (bijvoorbeeld table-danger of table-success) dan worden deze kleuren niet toegepast. Als ik mijn hacky CSS er weer uit haal dan werkt het wel weer maar heeft de rest weer een witte achtergrond.

Ik zit een beetje vast hoe ik mijn witte achtergrond issue verhelp zonder dat mn table classes (https://getbootstrap.com/docs/5.3/content/tables/#variants) sloop en die gewoon kan blijven gebruiken.

[RobIII]

Ik zou eens beginnen met wat specifieker te zijn dan >*>*. Dat was in IE6 tijd niet anders dan nu

[WoBBeL]

Ik heb geprobeerd mijn selector toe te spitsen om niet actief te zijn bij de gedefinierde classen table-danger en table-success maar ik snap niks van de CSS selector zoals hij hier staat.

Met de huidige code die werkt (maar niet als ik zelf mn classes definier op <tr>/<td>)

code:

.table>:not(caption)>*>* {
    background-color: #f5f5f5;
}

Opgedeeld zouden dat de volgende selectors zijn:

1 - alles met class table
2 - alles niet 'caption' voor de eerste child (dat zal mijn <tr> dus zijn?)
3 - alle 2e childs (dat zal mijn <td> dus zijn)
4 - alle 3e childs maar wat zou dat dan zijn?


Ik heb inmiddels andere CSS gevonden die wel werkt (--bs-table-bg definieren) maar wil nog wel graag weten hoe ik de CSS selector hierboven moet interpreteren.

Werkende CSS

code:

.table {
    --bs-table-bg: #f5f5f5; 
}

[I_IBlackI_I]

table -> tbody -> tr -> td

.table -> not(caption) -> * -> *