<!doctype html>
<html>
<head>
<title>Complex Pseudo Class Attribute CSS Selectors - RJM Programming - August, 2016 ... Thanks to http://learn.shayhowe.com/advanced-html-css/complex-selectors/</title>
<style>
h1 + a[href="#"] { color: green; }
h2 + a[href="#"]:link { color: blue; }
h2 + a[href="#"]:visited { color: green; }
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"]:hover { 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; }
section > a:first-child { background-color: cyan; }
section > a[href*="rjmprogramming.com.au"]:last-child { background-color: pink; }
a[target="_blank"] { font-weight: bold; }
img:only-of-type { border: 5px solid green; }
img:only-child { border: 5px solid yellow; }
</style>
</head>
<body>
<table><tr><th colspan=3>Complex Pseudo Class Attribute CSS Selectors - RJM Programming - August, 2016</th></tr><tr><td>
<textarea rows=32 cols=45 style='background-color: silver;'>
<style>
h1 + a[href="#"] { color: green; }
h2 + a[href="#"]:link { color: blue; }
h2 + a[href="#"]:visited { color: green; }
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"]:hover { 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; }
section > a:first-child { background-color: cyan; }
section > a[href*="rjmprogramming.com.au"]:last-child { background-color: pink; }
a[target="_blank"] { font-weight: bold; }
img:only-of-type { border: 5px solid green; }
img:only-child { border: 5px solid yellow; }
</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=38 cols=90 style='background-color: pink;'>
<a href="#">Default text colour is black ... This is an unselected a outside section ...<img src="#"> ... but img gets a yellow border as the :only-child of a parent element</a>
<section>
<a href="#">... This is selected with background colour cyan because it is a section :first-child 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, but only having never been visited as :link, else it will be green as :visited</a><br>
<a target="_blank" href="http://www.rjmprogramming.com.au">Another h2 ~ a and h2 + a section paragraph will be selected, but only on hovering as :hover, 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><br>
<a target="_blank" href="http://www.rjmprogramming.com.au/About_Us.html">Last of h2 ~ a section paragraphs will be selected, but only on hovering as :hover, as a "General Sibling" and so background-color will be pink as the :last-child given Attribute a[href*="rjmprogramming.com.au"] contains domain "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><br>
<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><img src="#"> ... but the img that follows gets a green border being the :only-of-type within the parent element
</div>
</article>
</textarea>
</td>
</table>
<hr>
<a href="#">Default text colour is black ... This is an unselected a outside section ...<img src="#"> ... but img gets a yellow border as the :only-child of a parent element</a>
<section>
<a href="#">... This is selected with background colour cyan because it is a section :first-child 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, but only having never been visited as :link, else it will be green as :visited</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><br>
<a target="_blank" href="http://www.rjmprogramming.com.au">Another h2 ~ a section paragraph will be selected, but only on hovering as :hover, 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><br>
<a target="_blank" href="http://www.rjmprogramming.com.au/About_Us.html">Last of h2 ~ a section paragraphs will be selected, but only on hovering as :hover, as a "General Sibling" and so background-color will be pink as the :last-child given Attribute a[href*="rjmprogramming.com.au"] contains domain "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>
</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><img src="#"> ... but the img that follows gets a green border being the :only-of-type within the parent element
</div>
</article>
</body>