CSS combinators allows us to reference the DOM relationship between, or more elements in CSS.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width"> <title>Combinators</title></Head><Body> < Section> <H1>H1 Content</H1> <H2>H2 Content</H2> <P>Sub text subtext</P> <ahref="#">Call to Action</a> <P>Paragraph Description Paragraph Description paragraph description paragraph description<ahref="#">Link in paragraph</a> </P> <ahref="#">Call to Action</a> </ Section></Body></HTML>
Section{Border:1px solid #ccc;width:500px;Padding-bottom:10px;}/*All the h1 inside sections*/Section H1{Background-color:#000;Color:#fff;margin:0;padding:10px 5px;}/*All the h1 inside sections*/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;}
[CSS3] Using CSS combinators to Identify siblings and descendants in CSS