HTML and CSS Reference
In-Depth Information
THE NEGATION (NOT) PSEUDO-CLASS
The negation pseudo-class can be used to explicitly apply styles to elements that
are not selected by a simple selector. Let's say you wanted to apply a specific width
to a number of form elements but not the submit. You could do this:
input[type=”text”], input[type=”url”], input[type=”email”],
p
select, textarea, etc, etc {
: ;
}
But this code is a total messy pain. The
:not
selector allows you to do this:
input:not([type=”submit”]) {
: ;
}
Yo u c a n p u t m u l t i p l e s i m p l e s e l e c t o r s i n s i d e t h e p a r e n t h e s e s s e p a r a t e d b y
commas, like so:
input:not([type=”submit”], [type=”file”])
CSS3 PSEUDO-CLASSES
Pseudo-classes don't just select elements; they select elements in certain states—for
example,
a{}
to select links, but then
a:hover {}
to select links only when they
are being hovered over by the mouse.
CSS3 introduces some new pseudo-classes for you to sink your teeth into. My
favorite,
:target
, allows you to select elements that are the target of the current
page URL. This is very useful and allows for some cool effects, because it effectively
lets you set styles to be applied when links are clicked. For example:
<a href=”#target”>Click me</a>
<div id=”target”>Woot!</div>
