{"id":24274,"date":"2016-09-26T03:01:43","date_gmt":"2016-09-25T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24274"},"modified":"2016-09-26T06:30:15","modified_gmt":"2016-09-25T20:30:15","slug":"css-and-html-complex-pseudo-class-selectors-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-and-html-complex-pseudo-class-selectors-tutorial\/","title":{"rendered":"CSS and HTML Complex Pseudo Class Selectors Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS and HTML Complex Pseudo Class Selectors Tutorial<\/p><\/div>\n

In the spirit of CSS itself, as the study of Cascading Style Sheets<\/a>, we want to add another “onion layer” on top of what we started doing back at CSS and HTML Complex Attribute Selectors Primer Tutorial<\/a> as shown below, and derived from<\/p>\n

\nIn the spirit of CSS itself, as the study of Cascading Style Sheets<\/a>, we want to add an “onion layer” on top of what we started doing back at CSS and HTML Complex Selectors Primer Tutorial<\/a> as shown below, today. That “onion layer”, in our “onions of the 4th dimension”<\/a> feeling here, relates to HTML element attributes<\/i><\/a> …<\/p>\n<\/blockquote>\n

today.<\/p>\n

That “onion layer”, in our “onions of the 4th dimension”<\/a> feeling here, relates to HTML element pseudo classes<\/i><\/a> …<\/p>\n

\nA pseudo-class is used to define a special state of an element.
\n<\/b>
\nFor example, it can be used to:
\n<\/b>
\n Style an element when a user mouses over it
\n Style visited and unvisited links differently
\n Style an element when it gets focus\n<\/p><\/blockquote>\n

Syntax-wise pseudo classes have a “:” prefix and we’ll enbold<\/b>en their usage in today’s beginning of dipping our toes into the “sea” of knowledge there is involved in this topic area of CSS …<\/p>\n


\n<style>
\nh1 + a[href=\"#\"] { color: green; }
\nh2 + a[href=\"#\"]:link<\/b> { color: blue; }
\nh2 + a[href=\"#\"]:visited<\/b> { color: green; }
\nh3 + a[href=\"#\"] { color: gray; }
\nh4 + a[href=\"#\"] { color: cyan; }
\n<\/b>
\nh1 ~ a[href=\"#\"] { background-color: lightgreen; }
\nh2 ~ a[href=\"#\"] { background-color: lightblue; }
\nh2 ~ a[href=\"http:\/\/www.rjmprogramming.com.au\"]:hover<\/b> { background-color: orange; }
\nh3 ~ a[href=\"#\"] { background-color: lightgray; }
\nh4 ~ a[href=\"#\"] { background-color: lightcyan; }
\n<\/b>
\narticle { background-color: yellow; }
\narticle > a[href=\"#\"] { font-style: italic; }
\n<\/b>
\nsection > a:first-child<\/b> { background-color: cyan; }
\nsection > a[href*=\"rjmprogramming.com.au\"]:last-child<\/b> { background-color: pink; }
\n<\/b>
\na[target=\"_blank\"] { font-weight: bold; }
\nimg:<\/b>only-of-type<\/b> { border: 5px solid green; }
\nimg:<\/b>only-child<\/b> { border: 5px solid yellow; }
\n<\/style>
\n<\/code><\/p>\n

Now, if you’ve been following this blog’s line of thinking on this thread of blog postings you’ll know we want you to visit the inspiring website we found about it at this link<\/a> … thanks, heaps.<\/p>\n

Okay, so we built on that last CSS one discussing Attributes, and today we start including just one more different kind of HTML element, that being the image HTML img<\/a> element type. We gravitate strongly towards this element type for inclusion today because we have Pseudo Class concepts like …<\/p>\n