# pseudo-classes & 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://irena-popova.gitbook.io/boost-your-css-skills/selectors/pseudo-classes-and-pseudo-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.