Web Design: CSS Pseudo Classes (Links)

CSS2 Pseudo-Classes

CSS3 Pseudo-Elements

Source:
http://www.w3schools.com/css/css_pseudo_classes.asp
http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
http://css-tricks.com/almanac/selectors/f/focus/
http://www.labnol.org/internet/hide-email-address-web-pages/28364/

Key Information:
* CSS pseudo-classes are used to add special effects to some selectors.
* CSS 1-2 pseudo-classes used for <a> hyperlinks,
* but CSS 3 introduced pseudo-elements that can be used for plain text.
* a:hover MUST come after a:link and a:visited in the CSS definition.
* a:active MUST come after a:hover in the CSS definition.
* Pseudo-class names are not case-sensitive.
* For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
* Hide email through pseudo classes

The syntax of pseudo-classes:
selector:pseudo-class
     {property:value;}

CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class
     {property:value;}

CSS Heresy Order:
a {color: red;}
a:link {color: black;}...style links to unvisited pages
a:visited {color: white;}...style after the link has been viewed
a:hover {color: cyan;} ... mouseover effect
a:active {color: maroon;}...link becomes active onclick or while holding down
a:focus {border: 1px solid red;}....INPUT-after click or keyboard or tabbing or other
a:focus:active state...When button is clicked, it is in
a:focus:hover {color: lime;}... after click while hovering

Focus:
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes works.

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused"

More examples:
P.cl1:hover {background: yellow;}
TD:hover {background: silver;}
TD A:hover {color: red; background: yellow;}

The selector matches any <p> element that is the first child of any element:
p:first-child {color: blue;}

The selector matches the first <i> element in all <p> elements:
p > i:first-child {color: blue;}

The selector matches all <i> elements in <p> elements that are the first child of another element:
p:first-child i {color: blue;}

The ::after pseudo-element can be used to insert some content after the content of an element.The following example inserts an image after each <h1> element:
h1::after {content: url(smiley.gif);}

/* unvisited link */ a:link {color: #FF0000;}

/* visited link */ a:visited { color: #00FF00;}

/* mouse over link */ a:hover {color: #FF00FF;}

/* selected link */ a:active {color: #0000FF;}


List of Pseudo Class and Element:

Selector Example     Example description

:link           a:link            Selects all unvisited links
:visited  a:visited        Selects all visited links
:active  a:active         Selects the active link
:hover  a:hover         Selects links on mouse over
:focus  input:focus    Selects the input element which has focus
::first-letter  p::first-letter   Selects the first letter of every <p> element
::first-line  p::first-line     Selects the first line of every <p> element
:first-child  p:first-child    Selects all <p> elements thats the first child of parent
::before  p::before        Insert content before every <p> element
::after  p::after           Insert content after every <p> element
:lang(language) p:lang(it)  Selects all <p> elements with a lang attribute value starting with "it"


Hide Email through CSS pseudo-classes:

Hide mailto: email address from spam bots thats posted on your website.

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>

Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>

Other Choices for hiding email:

*Obfuscate Email through JavaScript

*Random Array

*WordPress + PHP

*CAPTCHA's

*Encode email addresses in the browser

*See separate EMAIL post for all information