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

Custom Search