change facet button colors based on nth-child

code.css

/* colors when unselected */

%root% .wpgb-facet .wpgb-button-facet li:nth-child(1) .wpgb-button {
    background-color: red;
    border-color: red;
    color: white;
}

%root% .wpgb-facet .wpgb-button-facet li:nth-child(2) .wpgb-button {
    background-color: red;
    border-color: red;
    color: white;
}

%root% .wpgb-facet .wpgb-button-facet li:nth-child(3) .wpgb-button {
    background-color: red;
    border-color: red;
    color: white;
}

/* colors when selected */

%root% .wpgb-facet .wpgb-button-facet li:nth-child(1) .wpgb-button[aria-pressed="true"] {
    background-color: blue;
    border-color: blue;
    color: white;
}

%root% .wpgb-facet .wpgb-button-facet li:nth-child(2) .wpgb-button[aria-pressed="true"] {
    background-color: red;
    border-color: red;
    color: white;
}

%root% .wpgb-facet .wpgb-button-facet li:nth-child(3) .wpgb-button[aria-pressed="true"] {
    background-color: red;
    border-color: red;
    color: white;
}