CSS Selectors Primer Tutorial

CSS Selectors Primer Tutorial

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” …

You can also see this play out at WordPress 4.1.1′s Local Fonts Revisited Primer Tutorial.

If this was interesting you may be interested in this too.

This entry was posted in Tutorials, eLearning and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>