How can I set the target id of an element using CSS?

Question

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

I already have a CSS selector #checkout form.center

I would like to override this specifically for the confirmation form, but none of the things I'm trying to write apply. I should think that #confirmation form.centeror something should occupy the first rule, but it does not even hit the target. #confirmationis overridden by the aforementioned selector since it is not specific.

Answer 1

BoltClock answer extension:

CSS specificity. . , CSS-, .

- (#checkout form.center) :

#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  */
}

Answer 2

, :

#checkout #confirmation

, #confirmation form.center , , form.center, #confirmation, . :

#checkout form#confirmation.center

; , , , .