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

Complex Attribute CSS Selectors - RJM Programming - August, 2016
<style> h1 + a[href="#"] { color: green; } h2 + a[href="#"] { color: blue; } h3 + a[href="#"] { color: gray; } h4 + a[href="#"] { color: cyan; } h1 ~ a[href="#"] { background-color: lightgreen; } h2 ~ a[href="#"] { background-color: lightblue; } h2 ~ a[href="http://www.rjmprogramming.com.au"] { background-color: orange; } h3 ~ a[href="#"] { background-color: lightgray; } h4 ~ a[href="#"] { background-color: lightcyan; } article { background-color: yellow; } article > a[href="#"] { font-style: italic; } a[target="_blank"] { font-weight: bold; } </style>	... CSS works on HTML ... ... as shown below ... ... Thanks to ... http://learn.shayhowe.com/advanced-html-css/complex-selectors/	<a href="#">Default text colour is black ... This is an unselected a outside section ...</a> <section> <a href="#">... This is an unselected a within section ...</a> <h2>... This is an h2 ...</h2> <a href="#">This h2 ~ a and h2 + a 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</a><br> <a target="_blank" href="http://www.rjmprogramming.com.au">Another h2 ~ a and h2 + a section paragraph will be selected as a "General Sibling" and so background-color will be orange given Attribute a[href="http://www.rjmprogramming.com.au"] and will be selected as an "Adjacent Sibling" so font colour will be blue and will be bold given the Attribute select a[target="_blank"]</a> <div> <a href="#">... This is an unselected a within section ...</a> </div> <a href="#">This h2 ~ a section paragraph will be selected as a "General Sibling" and so background-color will be lightblue</a> </section> <a href="#">... This is an unselected a outside section and outside article ...</a> <article> <a href="#">This article > a article paragraph will be selected as a "Direct Child" and so font-style will be italic</a> <div> <a href="#">... This is an unselected a within article ...</a> </div> </article>

Complex Attribute CSS Selectors - RJM Programming - August, 2016

... CSS works on HTML ...
... as shown below ...
... Thanks to ...
http://learn.shayhowe.com/advanced-html-css/complex-selectors/

<a href="#">Default text colour is black ... This is an unselected a outside section ...</a>
<section>
  <a href="#">... This is an unselected a within section ...</a>
  <h2>... This is an h2 ...</h2>
  <a href="#">This h2 ~ a and h2 + a 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</a><br>
  <a target="_blank" href="http://www.rjmprogramming.com.au">Another h2 ~ a and h2 + a section paragraph will be selected as a "General Sibling" and so background-color will be orange given Attribute a[href="http://www.rjmprogramming.com.au"] and will be selected as an "Adjacent Sibling" so font colour will be blue and will be bold given the Attribute select a[target="_blank"]</a>
  <div>
    <a href="#">... This is an unselected a within section ...</a>
  </div>
  <a href="#">This h2 ~ a section paragraph will be selected as a "General Sibling" and so background-color will be lightblue</a>
</section>
<a href="#">... This is an unselected a outside section and outside article ...</a>
<article>
  <a href="#">This article &gt; a article paragraph will be selected as a "Direct Child" and so font-style will be italic</a>
  <div>
    <a href="#">... This is an unselected a within article ...</a>
  </div>
</article>

... This is an h2 ...

This h2 ~ a and h2 + a 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 h2 ~ a section paragraph will be selected as a "General Sibling" and so background-color will be lightblue

Another h2 ~ a section paragraph will be selected as a "General Sibling" and so background-color will be will be orange given Attribute a[href="http://www.rjmprogramming.com.au"] and will be selected as an "Adjacent Sibling" so font colour will be blue and will be bold given the Attribute select a[target="_blank"]

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

... This is an unselected a within article ...