<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>CSS Combinators</title>
<style>
span {color:Grey}
/* order is important here as child is also a descendent */
article span {color:Green;}
article > span {color:Red;}
article ~ span {color:Purple;}
article + span {color: Teal;}
</style>
</head>
<body style="font-size:2.1em;">
<span>this span is outside article.</span>
<article><span> this span is directly inside (child) article.</span></article>
<article><span><span>this span is a grandchild (descendent) of article.</span></span></article>
<span>this span is an adjacdent sibling of article.</span><br>
<mark>mark is neither span nor article.</mark><br>
<span>this span is a general (not adjacent) sibling of article.</span>
</body></html>
