Styling multiple of the same waybar modules

Ricing
1

here is how the docs say to do it:

{
  "name": "bar1"
   // desired settings
},
{ 
 "name": "bar2"
 // desired settings
} 

window.bar1#waybar { 
  background-color: rgba(10, 9, 10, 0.87);
} 

window.bar2#waybar {
  background-color: transparent;
}

here is how i did it for my top bar:

        "name": "topbar",
        "layer": "top",
        "output": ["HDMI-A-1"],
        "position": "top",

window.topbar#network,
window.topbar#custom-ip,
window.topbar#custom-wofi,
window.topbar#clock,
window.topbar#mpris,
window.topbar#cpu,
window.topbar#memory,
window.topbar#workspaces,
window.topbar#pulseaudio,
window.topbar#tray {
    border: 2px solid #0b75e0;
    margin: 5px 2px;
    padding: 0 2px;
}

and it didnt work at all! i did it exactly how it showed me too! (leaving “window“ out also did not work!)

for clarification,

this works just fine:

window.topbar#waybar {
    border: 2px solid #0b75e0;
    background-color: #191919;
    color: white;
}

but neither of these two methods work for the modules:

.topbar#network,
.topbar#custom-ip,
.topbar#custom-wofi,
.topbar#clock,
.topbar#mpris,
.topbar#cpu,
.topbar#memory,
.topbar#workspaces,
.topbar#pulseaudio,
.topbar#tray {
    border: 2px solid #0b75e0;
    margin: 5px 2px;
    padding: 0 2px;
}

window.topbar#network,
window.topbar#custom-ip,
window.topbar#custom-wofi,
window.topbar#clock,
window.topbar#mpris,
window.topbar#cpu,
window.topbar#memory,
window.topbar#workspaces,
window.topbar#pulseaudio,
window.topbar#tray {
    border: 2px solid #0b75e0;
    margin: 5px 2px;
    padding: 0 2px;
}