{"id":45537,"date":"2019-07-06T03:01:05","date_gmt":"2019-07-05T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45537"},"modified":"2019-07-06T07:31:02","modified_gmt":"2019-07-05T21:31:02","slug":"css-selectors-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-selectors-primer-tutorial\/","title":{"rendered":"CSS Selectors Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Selectors Primer Tutorial<\/p><\/div>\n

We recently instigated some cosmetic changes that we liked the look of at this blog and in a web application the changed<\/a><\/font> CSS selectors<\/font> server_client.html<\/a> …<\/p>\n


\n<style>
\n* { opacity: 0.9; }<\/font>
\n*:hover { opacity: 1.0; }
\ntd:active { border: 1px dashed purple; }
\na:linked { color: blue; }
\na:visited { color: pink; }
\ninput:focus { background-color: yellow; }<\/font>
\nth { text-align: left; }
\nh1, h3 { opacity: 1.0; }
\n<\/style><\/font>
\n<\/code><\/p>\n

… of recent times. We took as inspiration how HTML5 Rocks<\/a> styles their “code” snippets, but we didn’t want this style effect immediately, rather for when the user hovers over it … hence the CSS selector …<\/p>\n


\n<style>
\n*:hover { opacity: 1.0; }<\/font>
\n<\/style>
\n<\/code><\/p>\n

… “but there’s more”<\/a> (and a bit less, like here on Google Chrome (web browser) this :hover<\/a> CSS selector seems to be sporadic)<\/font> …<\/p>\n