HTML and CSS Reference
In-Depth Information
The traditional
CSS ID
selector can now be seen as syntactic sugar for
the attribute selector. These two selectors are equivalent:
#myid
[id=
"
myid
"
]
But the class selector is slightly more difficult. What attribute selector
we've considered so far would be equivalent to
.myclass
? Let's consider
some options
.
Attribute selector
Matches
Doesn't match
[class="myclass"]
class="myclass"
class="myclass
otherclass"
[class^="myclass"]
class="myclass
otherclass"
class="otherclass
myclass"
[class*="myclass"]
class="otherclass
myclass"
class="notmyclass"
It's clear that there's a gap in our toolkit. Fortunately,
CSS3
fills this
hole:
[class~="myclass"]
selects an element with a whitespace-separated
list of values, one of which is
myclass
.
Attribute selector
Matches
Doesn't match
[class~="myclass"]
class="myclass"
class="myclass
otherclass"
class="notmyclass"
Choosing what isn't
So far, we've concerned ourselves with positive identification. We've
selected the elements that are the first child, and we've selected ele-
ments that have a particular attribute. But
CSS3
also gives us the abil-
ity to select elements that aren't the first child or don't have particular
attributes, with the
:not
pseudo-class. To understand how this might be
useful, consider how you might lay out a form:
