> For the complete documentation index, see [llms.txt](https://irena-popova.gitbook.io/boost-your-css-skills/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irena-popova.gitbook.io/boost-your-css-skills/selectors/pseudo-classes-and-pseudo-elements.md).

# pseudo-classes & pseudo-elements

A closer look at pseudo-classes and pseudo-elements

### Pseudo-classes and pseudo-elements

:octagonal\_sign: **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.

## :point\_right: Pseudo-classes

 :octagonal\_sign: ***Pseudo-classes match elements based on characteristics other than their name, attributes or content.***

## :thinking: :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:<br>

```css
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:

```css
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:

```css
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:

```css
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

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

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

### :point\_right: Pseudo-elements

:octagonal\_sign: ***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:

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

> :warning: 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](http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo) for a list of the properties that apply.

## :first-letter

:point\_right: **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”:

```css
.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](http://www.w3.org/TR/CSS21/selector.html#first-letter) for a list of the properties that apply.

## :before and :after

:octagonal\_sign: CSS features **`:before`** and **`:after`** pseudo-elements can be used to insert generated content before or after an element’s content.

:point\_down: Here is an example of how `:before` is used:

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

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

<br>