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 class="box"></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.
Search WWH ::

Custom Search