<!doctype html>
<html>
<head>
<title>Complex CSS Selectors - RJM Programming - July, 2016 ... Thanks to http://learn.shayhowe.com/advanced-html-css/complex-selectors/</title>
<style>
h1 + p { color: green; }
h2 + p { color: blue; }
h3 + p { color: gray; }
h4 + p { color: cyan; }
h1 ~ p { background-color: lightgreen; }
h2 ~ p { background-color: lightblue; }
h3 ~ p { background-color: lightgray; }
h4 ~ p { background-color: lightcyan; }
article { background-color: yellow; }
article > p { font-style: italic; }
</style>
</head>
<body>
<table><tr><th colspan=3>Complex CSS Selectors - RJM Programming - July, 2016</th></tr><tr><td>
<textarea rows=14 cols=45 style='background-color: silver;'>
<style>
h1 + p { color: green; }
h2 + p { color: blue; }
h3 + p { color: gray; }
h4 + p { color: cyan; }
h1 ~ p { background-color: lightgreen; }
h2 ~ p { background-color: lightblue; }
h3 ~ p { background-color: lightgray; }
h4 ~ p { background-color: lightcyan; }
article { background-color: yellow; }
article > p { font-style: italic; }
</style>
</textarea></td><td> ... CSS works on HTML ...<br>... as shown below ...<br>... Thanks to ...<br><a target=_blank title='Useful link' href='http://learn.shayhowe.com/advanced-html-css/complex-selectors/'>http://learn.shayhowe.com/advanced-html-css/complex-selectors/</a></td><td>
<textarea rows=21 cols=90 style='background-color: pink;'>
<p>Default text colour is black ... This is an unselected p outside section ...</p>
<section>
<p>... This is an unselected p within section ...</p>
<h2>... This is an h2 ...</h2>
<p>This h2 ~ p and h2 + p section paragraph will be selected as a "General Sibling" and so background-color will be lightblue and will be selected as an "Adjacent Sibling" so font colour will be blue</p>
<div>
<p>... This is an unselected p within section ...</p>
</div>
<p>This h2 ~ p section paragraph will be selected as a "General Sibling" and so background-color will be lightblue</p>
</section>
<p>... This is an unselected p outside section and outside article ...</p>
<article>
<p>This article > p article paragraph will be selected as a "Direct Child" and so font-style will be italic</p>
<div>
<p>... This is an unselected p within article ...</p>
</div>
</article>
</textarea>
</td>
</table>
<hr>
<p>Default text colour is black ... This is an unselected p outside section ...</p>
<section>
<p>... This is an unselected p within section ...</p>
<h2>... This is an h2 ...</h2>
<p>This h2 ~ p and h2 + p section paragraph will be selected as a "General Sibling" and so background-color will be lightblue and will be selected as an "Adjacent Sibling" so font colour will be blue</p>
<div>
<p>... This is an unselected p within section ...</p>
</div>
<p>This h2 ~ p section paragraph will be selected as a "General Sibling" and so background-color will be lightblue</p>
</section>
<p>... This is an unselected p outside section and outside article ...</p>
<article>
<p>This article > p article paragraph will be selected as a "Direct Child" and so font-style will be italic</p>
<div>
<p>... This is an unselected p within article ...</p>
</div>
</article>
</body>