HTML and CSS Reference
In-Depth Information
:ONLY-OF-TYPE
The
:only-of-type
pseudo-class represents an element that is the only
child of its parent with the same element.
How can this be useful? Image you have a sequence of posts, each one
represented by a
div
with the class of “post”. Some of them have more than
one image, but others have only one image. You want the image within the
later ones to be aligned to the center, while the images on posts with more
than one image to be floated. That would be quite easy to accomplish with
this selector:
.post > img {
float: left;
}
.post > img:only-of-type {
float: none;
margin: auto;}
:EMPTY
The
:empty
pseudo-class represents an element that has no content within
it.
It can be useful in a number of ways. For example, if you have multiple
boxes in your “sidebar”
div
, but don't want the empty ones to appear on
the page:
#sidebar .box:empty {
display: none;
}
Beware that even if there is a single space in the “box”
div
, it will not be
treated as empty by the CSS, and therefore will not match the selector.
