Complex CSS Selectors - RJM Programming - July, 2016 ... Thanks to http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Complex CSS Selectors - RJM Programming - July, 2016
<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>	... CSS works on HTML ... ... as shown below ... ... Thanks to ... http://learn.shayhowe.com/advanced-html-css/complex-selectors/	<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>

Default text colour is black ... This is an unselected p outside section ...

... This is an unselected p within section ...

... This is an h2 ...

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

... This is an unselected p within section ...

This h2 ~ p section paragraph will be selected as a "General Sibling" and so background-color will be lightblue

... This is an unselected p outside section and outside article ...

This article > p article paragraph will be selected as a "Direct Child" and so font-style will be italic

... This is an unselected p within article ...