CSS Tutorial – 07 – Pseudo Selectors

The pseudo classes and elements can be appended onto other selectors in order to make them more specific. They are all preceded by a colon.

Pseudo classes

The first two – :link and :visited – can only be applied to the anchor element. :link will match links that haven’t been viewed and :visited will match links that have been viewed.

a:link
a:visited

A selector with the :hover pseudo class is applied when the mouse pointer hovers over the selected element. Similarly, :active matches elements as they are being activated, for example by a mouse click. For :hover to work it must come after :link and :visited, and for :active to work it must come after :hover.

a:hover
a:active

:focus can be used on elements that can receive focus, such as the input element. However, this pseudo-class won’t work in Internet Explorer 7 and earlier versions. The difference between :active and :focus is that :active will only last for the duration of the click while :focus lasts until the element loses focus.

input:focus

:first-child matches an element if it is the first child of the parent element.

a:first-child

In the example below the selector above would apply to the first anchor element.

<p>
  <a> name="first"</a>
  <a> name="second"</a>
</p>

The last pseudo class is :lang followed by a language parameter.

p:lang(en)

This pseudo class will apply only to elements that are set to the specified language using the generic lang attribute.

<p lang="en"></p>

Pseudo elements

The first two pseudo elements – :first-letter and :first-line – can apply styles to the first letter and the first line of an element. They only work on block-level elements such as paragraphs.

p:first-letter
p:first-line

The last two pseudo elements – :before and :after – can insert content before and after an element using the content property.

p:before { content:"Before"; }
p:after  { content:"After"; }

Recommended reading:
Sams - Teach Yourself HTML and CSS in 24 Hours

PVT book:
Handbook of C++ Syntax