How to combine css with selectors

Question

I need to clean up my CSS file and remove some bloat. I know it's possible to combine classes and ids by separating them with commas. However, I'm not sure how to go about combining them when they have more complex selectors like the ones below.

Any help would be appreciated. Thank you.

body #gform_wrapper_14 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_15 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

or

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_15 { 
      max-width: 80%;
      margin: 0 auto;
     }
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }
    .hor-address {
        width:500px;
    }
}

Clarification : I have multiple #gform_wrapper_xx objects (generated by 3rd party Wordpress plugin) and but I don't want to change all of them. I just want to change these 3.

Answer 1

To don't generate the same css bloat do:

body .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

Answer 2

As simple has that:

body #gform_wrapper_14 .gform_footer input[type=submit],
body #gform_wrapper_15 .gform_footer input[type=submit],
body #gform_wrapper_17 .gform_footer input[type=submit] {
    border-radius:0px;
    background:#e89d53;
}

and that:

@media only screen and (min-width: 641px) {
    body #gform_wrapper_14,
    body #gform_wrapper_15,
    body #gform_wrapper_17 { 
      max-width: 80%;
      margin: 0 auto;
     }

    .hor-address {
        width:500px;
    }
}

Answer 3

You can do your code cleaner using modern sass(scss). The code will be:

body{
   #gform_wrapper_14{
      .gform_footer{
         input[type=submit] {
            border-radius:0px;
            background:#e89d53;
         }
      }
   }
   #gform_wrapper_15{
      @extend #gform_wrapper_14;
   }
   #gform_wrapper_17{
      @extend #gform_wrapper_14;
   }
}

Answer 4

Since all of your target elements are prefixed. You can use an attribute selector to cut down on redundancy. By using something like this [id^="gform_wrapper_"] you essentially target all of the elements with an id that starts with gform_wrapper_

You can read more about attribute selectors here

 [id^="gform_wrapper_"] input[type=submit] { border-radius: 0px; background: #e89d53; }

 <div id="gform_wrapper_14"> <div class=".gform_footer"> <input type="submit"> </div> </div> <div id="gform_wrapper_15"> <div class=".gform_footer"> <input type="submit"> </div> </div> <div id="gform_wrapper_16"> <div class=".gform_footer"> <input type="submit"> </div> </div>