css - CSS tag assignment

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.

Answer 2

You need to inlcude .options for each set e.g.:

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

When you use the comma, it essentially acts as an 'OR' statement. Each of the comma separated rules are considered individually. The above code is the same as as writing:

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