+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Sibling selectors in CSS3 (/showthread.php?tid=5176)
Sibling selectors in CSS3 - Qomplainerz - 07-26-2023
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sibling Selectors Example</title>
<style>
/* Select only the first sibling (immediate previous element) of h2 */
h2 + p {
font-style: italic;
}
</style>
</head>
<body>
<h2>This is a heading</h2>
<p>This paragraph will not be italic.</p>
<p>This paragraph will be italic because it is the immediate sibling of h2.</p>
</body>
</html>
Explanation:
Sibling selectors (+) target elements that are immediate siblings of another element. In this example, the h2 + p selector selects the paragraph (<p>) that is the immediate sibling of the h2 element and applies italic font style to it.