Search code examples
htmlcsscss-selectorscss-specificity

How can I specifically target this element id with CSS?

<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.

Solution

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