News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 07 – Pseudo Selectors

CSS tutorials

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 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.


: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.


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


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

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

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


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.


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 additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours