HTML and CSS Reference
In-Depth Information
#container > .box {
float: left;
padding-bottom: 15px;
}
This is the same code from the descendant combinator example, but instead of a space char-
acter, we're using the greater-than symbol (or right angle bracket.)
In this example, the selector will match all elements that have a class of
box
and that are
immediate children
of the
#container
element. That means, unlike the descendant com-
binator, there can't be another element wrapping
.box
—it has to be a direct child element.
Here's an HTML example:
<div id="container">
<div class="box"></div>
<div>
<div class="box"></div>
</div>
</div>
In this example, the CSS from the previous code example will apply only to the first
<div>
element that has a class of
box
. As you can see, the second
<div>
element with a class of
box
is inside another
<div>
element. As a result, the styles will not apply to that element,
even though it too has a class of
box
.
Again, selectors that use this combinator can be somewhat restricting, but they can come in
handy—for example, when styling nested lists.
General Sibling Combinator
A selector that uses a general sibling combinator matches elements based on sibling relation-
ships. That is to say, the selected elements are beside each other in the HTML.
