The adjacent sibling selectors can be used to select sibling elements. This selector has the syntax like E1 + E2, where E2 is the target of the selector.
Example: Example of CSS Adjacent Sibling Selectors
<! DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Adjacent Sibling Selectors</title>
<style type="text/css">
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
E.g. Description
The selector h1 + p in the example above will select the <p> elements only if both the <h1> and <p> elements share the same parent in the document tree and <h1> is immediately precedes the <p> element. That means only those paragraphs that come immediately after each <h1> heading will have the associated style rules.
No comments:
Post a Comment