Question

I’m using this CSS

.options input[type="radio"],input[type="checkbox"],label{
vertical-align: middle;
}

But the vertical-align property is being assigned to all the check boxes on the site not just ones in the ‘options’ class.

Answer 1

CSS rules which are comma seperated, have no relation to each other, and are just a short-hand, consistent way, of applying the same styles for different rules. Your example could be rewritten as:

.options input[type="radio"]
{
  vertical-align: middle;
}
input[type="checkbox"]
{
  vertical-align: middle;
}
label
{
   vertical-align: middle;
}

Therefore the 2nd & 3rd rule will apply these styles to all input checkboxes and labels. To get the results you are after, your rules should be rewritten as:

.options input[type="radio"]
{
  vertical-align: middle;
}
.options input[type="checkbox"]
{
  vertical-align: middle;
}
.options label
{
   vertical-align: middle;
}

Then the shorthand for this would be:

.options input[type="radio"],
.options input[type="checkbox"],
.options label
{
   vertical-align: middle;
}

Also, its worth noting, that best practice is to put each rule & style on a seperate line. This will make version controlling a lot easier if you are to later use it.