CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Combinators</title> </head> <body> <section> <h1>H1 Content</h1> <h2>H2 Content</h2> <p>sub text subtext</p> <a href="#">Call to Action</a> <p> paragraph description paragraph description paragraph description paragraph description <a href="#">link in paragraph</a> </p> <a href="#">Call to Action</a> </section> </body> </html>
section { border: 1px solid #ccc; width: 500px; padding-bottom: 10px; } /* All the h1 inside section */ section h1 { background-color: #000; color: #fff; margin: 0; padding: 10px 5px; } /* All a tags as direct child in section */ section > a { color: red; } /*only descendants a tag of the section*/ section p > a { color: #000; } /* the p tag next to h2 tag*/ section h2 + p { font-style: italic; margin-top: -15px; } /* All the siblings after h1*/ section h1 ~ * { margin-left: 15px; }