HTML and CSS Reference
In-Depth Information
#container .box {
float: left;
padding-bottom: 15px;
This declaration block will apply to all elements that have a class of box that are inside an
element with an ID of container . It's worth noting that the .box element doesn't have to
be an immediate child: there could be another element wrapping .box , and the styles would
still apply.
Look at the following HTML:
<div id="container">
<div class="box"></div>
<div class="box-2"></div>
<div class="box"></div>
If we apply the CSS in the previous example to this section of HTML, the only element that'll
be affected by those styles is the first <div> element that has a class of box . The <di-
v> element that has a class of box-2 won't be affected by the styles. Similarly, the second
<div> element with a class of box won't be affected because it's not inside an element with
an ID of container .
You should be careful when using the descendant combinator in your CSS. This kind of se-
lector, while making your CSS a little easier to read, can unnecessarily restrict your styles
to a specific context—in this case, the styles are restricted to boxes inside of #contain-
er —which can make your code inflexible.
Child Combinator
A selector that uses the child combinator is similar to a selector that uses a descendant com-
binator, except it only targets immediate child elements:
Search WWH ::

Custom Search