HTML and CSS Reference
In-Depth Information
h2 ~ p {
margin-bottom: 20px;
}
This type of selector is declared using the tilde character (
~
). In this example, all paragraph
elements (
<p>
) will be styled with the specified rules, but only if they are siblings of
<h2>
elements. There could be other elements in between the
<h2>
and
<p>
, and the styles would
still apply.
Let's apply the CSS from above to the following HTML:
<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
<p>Paragraph example.</p>
</div>
In this example, the styles will apply only to the first three paragraph elements. The last para-
graph element is not a sibling of the
<h2>
element because it sits inside the
<div>
element.
Adjacent Sibling Combinator
A selector that uses the adjacent sibling combinator uses the plus symbol (
+
), and is almost
the same as the general sibling selector. The difference is that the targeted element must be an
immediate
sibling, not just a general sibling. Let's see what the CSS code for this looks like:
p + p {
text-indent: 1.5em;
margin-bottom: 0;
}
This example will apply the specified styles only to paragraph elements that immediately fol-
low other paragraph elements. This means the first paragraph element on a page would not
receive these styles. Also, if another element appeared between two paragraphs, the second
paragraph of the two wouldn't have the styles applied.
