HTML and CSS Reference
In-Depth Information
note
It may be counterintuitive, but the ID selector
#user
in the previous
example is more specific than selecting the same element using the
attribute selector
[id=user]
.
There are occasions where neither the source order nor the specificity can
be changed, but you still need a way to trump the specificity calculations.
In these cases, you can use the
!important
declaration to lock down indi-
vidual properties.
blockquote p { color: green; }
[...]
p { color: black
!important
; }
Here specificity and source order are ignored, and the text will be black,
not green.
Most projects will never need to use the
!important
declaration. If
you find yourself putting it in your code to make something work,
instead take another look at what selectors you are using, source order, and
whether including certain CSS code on a page is necessary. The use cases for
this declaration typically arise when working with third-party code, content
management systems, or other situations where you do not have the ability
to rethink selectors.
There are an infinite number of ways you can write selectors, and there
are often dozens of ways a particular element in a document can be
selected. Well-written and easily maintainable CSS often comes down to
choosing selectors that are just verbose enough to offer the specificity
and distinctions you need to style the various elements of a site.
