Css Pseudo-Classes By Mdn

Front 1

:link

Back 1

The CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.

Example:

a:link {color: slategray;}

Front 2

:visited

Back 2

The CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.

Example:

a:visited { background-color: white }

Front 3

:active

Back 3

The CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on and HTML elements, but may not be limited to just those.

This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules. In order to style the appropriate links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

Example:

a:active { color: lime } /* active links */

Front 4

:hover

Back 4

The CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

The pseudo-class can be applied to any pseudo-element.

Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.

Example:

div.menu-bar li:hover > ul { display: block;}

Front 5

:focus

Back 5

The CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

This pseudo class applies only to the focused element, not its parents, like :checked and :enabled but unlike :active or :hover.

Syntax:

element:focus { ... }

Example:

.first-name:focus { color: red;}

Front 6

:first-child

Back 6

The CSS pseudo-class represents any element that is the first child element of its parent.

Syntax:

element:first-child { /* style properties */ }

Example:

span:first-child { background-color: lime;}

Front 7

:last-child

Back 7

The CSS pseudo-class represents any element that is the last child element of its parent.

Syntax:

element:last-child { style properties }

Example:

li:last-child { background-color: lime;}

Front 8

:nth-child

Back 8

The (an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

3n+4 would match child elements 4, 7, 10, 13, etc.

Syntax:

element:nth-child(an + b) { style properties }

Example:

.third span:nth-of-type(2n+1) { background-color: lime;}

Front 9

:nth-last-child

Back 9

The (an+b) CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element.

In effect, it functions the same as :nth-child except it selects items counting backwards from the end of element series, not the start.

Syntax:

element:nth-last-child(an + b) { style properties }

Example:

span:nth-last-child(even)

Front 10

:nth-of-type

Back 10

The (an+b) CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

Syntax:

element:nth-of-type(an + b) { style properties }

Example:

p:nth-of-type(2n+1) { text-align: left; }

Front 11

:first-of-type

Back 11

The CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

Syntax:

element:first-of-type { /* style properties */ }

Example:

div :first-of-type { background-color: lime;}

Front 12

:last-of-type

Back 12

The CSS pseudo-class represents the last sibling with the given element name in the list of children of its parent element.

Syntax:

element:last-of-type { style properties }

Example:

p em:last-of-type { color: lime;}

Front 13

:empty

Back 13

The pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

Syntax:

:empty { /* style properties */ }

Example:

.box:empty { background: lime;}

Front 14

:target

Back 14

The pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:

http://example.com/folder/document.html#section2

The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the pseudo-class.

Example:

:target { outline: solid red } /* draw a red, solid line around the target element */

Front 15

:checked

Back 15

The CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the pseudo-class no longer applies to this element, but will to the relevant one.

Syntax:

element:checked { style properties }

Example:

input:checked { margin-left: 25px; border: 1px solid blue;}

Front 16

:enabled

Back 16

The CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus.

Example:

input:enabled { color: #22AA22;}

Front 17

:disabled

Back 17

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

Example:

input[type="text"]:disabled { background: #ccc; }