Changing the matched CSS rules of an object

It’s not clear which buttons you are talking about – can you be more specific? Do the buttons have different classes or id’s assigned to them?

Sorry, may not have been too clear here, the buttons on the linked site are fine

But if you inspect the text fields, they are all have the same ‘Matched CSS rules’ (Chrome’s Inspector’s words) which means I can only change the styling of all of them or none of them

I don’t think they actually have classes or id’s, they’re just constructed by WooCommerce’s CSS and are automatically labelled as…
.woocommerce form .form-row.validate-required.woocommerce-invalid input.input-text, .woocommerce-page form .form-row.validate-required.woocommerce-invalid input.input-text

This isn’t set in the CSS, and it isn’t set by me. I can’t, for the life of me, figure out where they’re getting these attributes

Any idea?

You need to look at the HTML to see if they have classes or ids specific to each field. For example this:

<p class="form-row form-row-first validate-required" id="billing_first_name_field"><label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label><input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder=""  value=""  />
				</p>

	<p class="form-row form-row-last validate-required" id="billing_last_name_field"><label for="billing_last_name" class="">Last Name <abbr class="required" title="required">*</abbr></label><input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder=""  value=""  />
				</p><div class="clear"></div>

	<p class="form-row form-row-wide" id="billing_company_field"><label for="billing_company" class="">Company Name</label><input type="text" class="input-text" name="billing_company" id="billing_company" placeholder=""  value=""  />

Those each have a specific id – so you can use that to apply specific CSS.

Ahaaaa

Only remaining question is where do I put the CSS to apply to each of these?

They’re generated through the WooCommerce CSS (which is a travesty to behold), but if I put them in my theme’s style.css, would that work as well?

Ideally, you would add CSS to a child theme style.css file or using a Custom CSS option or plugin – otherwise, your changes will be overwritten when the theme or plugin is updated.

And since it looks like you are using twentytwelve, you absolutely should not make ANY changes to theme files – as it’s crucial to have a clean copy of the default theme for troubleshooting.

If you’ve already made changes, I’d suggest going back and making a child theme.

If you only want to modify CSS, you can use a plugin such as Custom CSS Manager.

Then you can add CSS changes there – the easiest way is to find them using Firebug (or Chrome Dev Tools) and copy those to the new CSS and change there.

Isn’t that just the old wive’s tale fed to people new to coding so that they have something to fall back on if they destroy everything? Haha

I always keep backups of everything important, including of the most recent changes just in case

I mean, it probably is better to make a child theme, but I’m a real thrill seeker

Anyway, ta muchly for the help, monsieur Yogi. You truly are smarter than the average bear