HTML and CSS Reference
In-Depth Information
.container:before {
content: "";
display: block;
width: 50px;
height: 50px;
background-color: #141414;
}
This example uses one kind of pseudo-element, the
:before
pseudo-element. As the name
suggests, this selector inserts an imaginary element into the page, inside the targeted element,
before its contents.
Don't worry—we'll cover pseudo-elements in greater detail later in the topic.
Using Multiple Selectors
Each of the selectors shown above can be combined with one or more other selectors. For
the most part, you'll want to avoid combining too many selectors together, but here are a few
quick examples to help you grasp the concept:
p.box {
color: blue;
}
In this example, we're combining the element type selector with a class selector. As a result,
this will target only paragraph elements that have a class of
.box
. This is a poor choice of
selector, and should be avoided in almost all circumstances. In normal practice, it's more than
enough to specify a selector with a class such as
.box
without over-qualifying it with the
p
portion (or any other element type selector).
#form [type=text] {
border: solid 1px #ccc;
}
This selector combines the ID selector with the attribute selector. This will target all elements
with a type attribute of
text
that are inside an element with an ID of
form
.
