Css pseudo class and elements

Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.

/* Any button over which the user's pointer is hovering */ button:hover  color: blue; > 

A pseudo-class consists of a colon ( : ) followed by the pseudo-class name (e.g., :hover ). A functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., :dir() ). The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in case button:hover ).

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ( :visited , for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover , which lets you know if the mouse is over an element or not).

Note: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

Element display state pseudo-classes

These pseudo-classes enable the selection of elements based on their display states.

Matches an element that is currently in fullscreen mode.

Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.

Matches an element that is currently in picture-in-picture mode.

Input pseudo-classes

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

Represents a user interface element that is in an enabled state.

Represents a user interface element that is in a disabled state.

Represents any element that cannot be changed by the user.

Represents any element that is user-editable.

Matches an input element that is displaying placeholder text. For example, it will match the placeholder attribute in the and elements.

Matches one or more UI elements that are the default among a set of elements.

Matches when elements such as checkboxes and radio buttons are toggled on.

Matches UI elements when they are in an indeterminate state.

Matches a user-input element which is empty, containing an empty string or other null input.

Matches an element with valid contents. For example, an input element with the type ’email’ that contains a validly formed email address or an empty value if the control is not required.

Matches an element with invalid contents. For example, an input element with type ’email’ with a name entered.

Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range.

Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range.

Matches when a form element is required.

Matches when a form element is optional.

Represents an element with incorrect input, but only when the user has interacted with it.

Linguistic pseudo-classes

These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

The directionality pseudo-class selects an element based on its directionality as determined by the document language.

Select an element based on its content language.

Location pseudo-classes

These pseudo-classes relate to links, and to targeted elements within the current document.

Matches an element if the element would match either :link or :visited .

Matches links that have not yet been visited.

Matches links that have been visited.

Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page.

Matches the element which is the target of the document URL.

Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.

Represents elements that are a reference point for selectors to match against.

Resource state pseudo-classes

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

Represents a media element that is capable of playing when that element is playing.

Represents a media element that is capable of playing when that element is paused.

Time-dimensional pseudo-classes

These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

Represents the element or ancestor of the element that is being displayed.

Represents an element that occurs entirely before the :current element.

Represents an element that occurs entirely after the :current element.

Tree-structural pseudo-classes

These pseudo-classes relate to the location of an element within the document tree.

Represents an element that is the root of the document. In HTML this is usually the element.

Represents an element with no children other than white-space characters.

Uses An+B notation to select elements from a list of sibling elements.

Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.

Matches an element that is the first of its siblings.

Matches an element that is the last of its siblings.

Matches an element that has no siblings. For example, a list item with no other list items in that list.

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

Matches an element that is the first of its siblings, and also matches a certain type selector.

Matches an element that is the last of its siblings, and also matches a certain type selector.

Matches an element that has no siblings of the chosen type selector.

User action pseudo-classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.

Matches when an item is being activated by the user. For example, when the item is clicked on.

Matches when an element has focus.

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Functional pseudo-classes

These pseudo-classes accept a selector list or forgiving selector list as a parameter.

The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. The list is forgiving.

The negation, or matches-none, pseudo-class represents any element that is not represented by its argument.

The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. The list is forgiving.

The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element.

Syntax

selector:pseudo-class  property: value; > 

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

Alphabetical index

Pseudo-classes defined by a set of CSS specifications include the following:

Источник

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* unvisited link */
a:link color: #FF0000;
>

/* visited link */
a:visited color: #00FF00;
>

/* mouse over link */
a:hover color: #FF00FF;
>

/* selected link */
a:active color: #0000FF;
>

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes:

When you hover over the link in the example, it will change color:

Example

Hover on

An example of using the :hover pseudo-class on a element:

Example

Simple Tooltip Hover

Hover over a element to show a

element (like a tooltip):

Hover over me to show the

element.

Example

p <
display: none;
background-color: yellow;
padding: 20px;
>

CSS — The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Match the first

element

In the following example, the selector matches any

element that is the first child of any element:

Example

Match the first element in all

elements

In the following example, the selector matches the first element in all

elements:

Example

Match all elements in all first child

elements

In the following example, the selector matches all elements in

elements that are the first child of another element:

Example

CSS — The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for elements with lang=»no»:

Example

Some text A quote in a paragraph Some text.

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects elements with a value within a specified range
:invalid	input:invalid	Selects all elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with «it»
:last-child	p:last-child	Selects every elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects elements with no «required» attribute
:out-of-range	input:out-of-range	Selects elements with a value outside a specified range
:read-only	input:read-only	Selects elements with a «readonly» attribute specified
:read-write	input:read-write	Selects elements with no «readonly» attribute
:required	input:required	Selects elements with a «required» attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all elements with a valid value
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every element
::before	p::before	Insert content before every element
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

Источник