CSS Syntax for multiple items

Hello,

I'm using this CSS to change the colours on a submit form button. I have three other forms that I want to do the same thing to.

Can I include them in this CSS, (listing each form ID), or do I have to repeat this CSS for each form? (The other form IDs are: 1092, 1099, 1105).

/*Change Colours of Submit Button on Contact Page */
#wpforms-submit-78.wpforms-submit {
background-color: #d61f2f;
color: #fff;
font-size: 16px
}
/*Change Colours of Submit Button on Contact Page When Hovered Over */
#wpforms-submit-78.wpforms-submit:hover {
background-color: #fff;
color: #d61f2f;
}

Thanks in advance,
Casper

  • Nithin

    Hey Casper,

    Can I include them in this CSS, (listing each form ID), or do I have to repeat this CSS for each form? (The other form IDs are: 1092, 1099, 1105).

    If the CSS properties are common among these IDs, then there isn't any need to repeat the CSS. You can declare all together. For eg:

    /*Change Colours of Submit Button on Contact Page */
    #wpforms-submit-78.wpforms-submit, #wpforms-submit-1092.wpforms-submit, #wpforms-submit-1099.wpforms-submit, #wpforms-submit-1105.wpforms-submit  {
           background-color: #d61f2f;
           color: #fff;
           font-size: 16px
    }

    I suppose the ID here is 78, so I have replaced that in the above example. The same would go for the hover effect too:

    #wpforms-submit-78.wpforms-submit:hover, #wpforms-submit-1092.wpforms-submit:hover, #wpforms-submit-1099.wpforms-submit:hover, #wpforms-submit-1105.wpforms-submit:hover {
    background-color: #fff;
    color: #d61f2f;
    }

    If the CSS doesn't work, or if you still have issue, either please enable support access, or provide a link to your website.

    Would highly recommend that you make changes like this to a theme using a Child theme, so that it won't be overwritten when you update your theme.

    Best Regards,
    Nithin