How can I specifically target this element id with CSS?

Question

<div id=checkout>
<form id="confirmation" class="center">
<p>content</p>
</form>
</div>

I have a CSS selector #checkout form.center already being used

i would like to override this specifically for the confirmation form, but none of the things I try to write get applied. I should think that #confirmation form.center or something should supercede the first rule, but it doesn't even seem to hit the target. #confirmation gets overridden by the above mentioned selector because it's not as specific.

Mascon

Answer 1

Expanding on BoltClock's answer:

Each CSS selector has a specificity value. For each element, in case of a conflict for the value of one of its properties, the rule with highest specificity takes precedence. Generally, the more and better information in a CSS selector, the greater its specificity.

For this reason, adding something appropriate to your existing selector (#checkout form.center) will enable you to override it:

#checkout form.center {
  /* your existing CSS */
}

#checkout #confirmation {
  /* your overrides; this has higher specificity */
}

#checkout form#confirmation {
  /* this would also work -- even higher specificity */
}

#checkout form#confirmation.center {
  /* even higher */
}

#checkout form.center p {
  /* works inside the p only, but also has
     greater specificity than #checkout form.center  */
}

Induction

Answer 2

If you need to specifically override your existing selector, use:

#checkout #confirmation

The reason why #confirmation form.center doesn't work is because that selects form.center that sits within a #confirmation element, which isn't the same. You would have written it as this instead:

#checkout form#confirmation.center

but that's way overkill; the first selector I suggest is specific enough to override your first selector.

Denominator