pseudo-classes & pseudo-elements

A closer look at pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements

🛑 Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content.

👉 Pseudo-classes

🛑 Pseudo-classes match elements based on characteristics other than their name, attributes or content.

🤔 :first-child

This pseudo-class matches an element that is the first child element of another element. Let’s say you want to give the first paragraph of an article a special styling. If the article is contained in a div element with a class name of “article”, the following rule would match the first p element in each article:

div.article p:first-child {
	font-style:italic;
	}

To match all p elements that are the first child of any element, you can use the selector in this rule:

p:first-child {
	font-style:italic;
	}

:link and :visited

The link pseudo-classes affect the unvisited and visited states of links. The two states are mutually exclusive – a link cannot be both visited and unvisited at the same time.

These pseudo-classes only apply to hyperlink source anchors as determined by the document language. For HTML, this means a elements with an href attribute. Since it doesn’t affect any other elements, the following selectors are the same:

a:link
:link

:hover, :active, and :focus

The dynamic pseudo-classes can be used to control the presentation of certain elements depending on certain actions performed by the user.

:hover applies while the user is using a pointing device to point to an element but does not activate it. Most commonly this means using a mouse to make the cursor hover over an element.

:active applies while an element is being activated by the user. For mouse users this means if you press the mouse button and keep it pressed, until you release it.

:focus applies while an element has the focus, i.e. while it accepts keyboard events.

An element may match several pseudo-classes at the same time. An element could have focus and be hovered over, for instance:

input[type=text]:focus {
	color:#000;
	background:#ffe;
	}
input[type=text]:focus:hover {
	background:#fff;
	}

The first rule will match single line input elements that have focus, and the second rule will match the same elements when they are also hovered over.

:lang

🤔 The language pseudo-class can be used to style elements whose content is defined to be in a certain language (human language, not markup language). The following rule defines which quotation marks to use for an inline quotation that is in English:

q:lang(en) { quotes: "\201D" "\201D" "\2019" "\2019"; }

The human language of a document or element is normally specified with the lang attribute in HTML and the xml:lang attribute in XHTML.

👉 Pseudo-elements

🛑 Pseudo-elements allow authors to access and format parts of the document that are not available as nodes in the document tree.

:first-line

The :first-line - the pseduo-element affects the first line of a paragraph of text. It can only be applied to block level elements, inline-block, table-caption or a table-cell.

The length of the first line obviously depends on a number of factors, including font size and the width of the element containing the text.

The following rule will apply to the first line of text in a paragraph:

p:first-line {
	font-weight:bold;
	color;#600;
	}

⚠️ Note that there are some restrictions on which properties that apply to a :first-line pseudo-element. Have a look at CSS 2.1, 5.12.1 The :first-line pseudo-element for a list of the properties that apply.

:first-letter

👉 This pseudo-element lets you target the first letter or digit of an element, and applies to block, list-item, table-cell, table-caption and inline-block elements.

The following rule would apply to the first character in an element with the class name “preamble”:

.preamble:first-letter {
	font-size:1.5em;
	font-weight:bold;
	}

As for the :first-line pseudo-element, the :first-letter pseudo-element has some restrictions on which properties that can be applied. Have a look at CSS 2.1, 5.12.2 The :first-letter pseudo-element for a list of the properties that apply.

:before and :after

🛑 CSS features :before and :after pseudo-elements can be used to insert generated content before or after an element’s content.

👇 Here is an example of how :before is used:

.cbb:before {
	content:"";
	display:block;
	height:17px;
	width:18px;
	background:url(top.png) no-repeat 0 0;
	margin:0 0 0 -18px;
	}

An example of using :after to insert the URL of a link after the link text:

a:link:after {
	content: " (" attr(href) ") ";
	}