CSS Selectors Primer Tutorial
We recently instigated some cosmetic changes that we liked the look of at this blog and in a web application the changed CSS selectors server_client.html …
<style>
* { opacity: 0.9; }
*:hover { opacity: 1.0; }
td:active { border: 1px dashed purple; }
a:linked { color: blue; }
a:visited { color: pink; }
input:focus { background-color: yellow; }
th { text-align: left; }
h1, h3 { opacity: 1.0; }
</style>
… of recent times. We took as inspiration how HTML5 Rocks 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 …
<style>
*:hover { opacity: 1.0; }
</style>
… “but there’s more” (and a bit less, like here on Google Chrome (web browser) this :hover CSS selector seems to be sporadic) …
- :visited CSS selector can style links you have clicked (ie. visited)
- :focus CSS selector can style input elements in focus (ie. awaiting interactive input, perhaps, from the user)
- :active CSS selector can style active link
We’ll include an HTML iframe (of that aforesaid mentioned web application) below for you to try all this out below
… versus the “old way” …
If this was interesting you may be interested in this too.
