HTML and CSS Reference
In-Depth Information
input[type=number],
input[type=range],
input[type=color],
input[type=file],
input[type=submit],
input[type=image],
input[type=reset],
input[type=button] {
display: block;
width: 12em;
}
The
:not
pseudo-class allows you to be more succinct than either of
those two examples:
input { margin: 1em; }
input:not([type=checkbox]):not([
type=radio]) {
display: block; width: 12em;
}
You can also combine
:not
with other
selectors you've seen in this chapter. Going
back to the
:nth-child
examples in the sec-
tion “Selecting among a set of elements
with pseudo-classes,” this is how you select
everything except the first two list items:
li:not(:nth-child(-n+2)) {
background-color: #000;
}
Pseudo-elements
Pseudo-elements
are
CSS
selectors that allow you to style certain page
elements as if an element existed in your markup. It sounds more
complicated than it is, so let's dive into some examples. A common
typographical feature, almost since the beginning of book publishing, is
