Scribd
Upload
101 views5 pages

All CSS Pseudo Elements

The document describes different CSS pseudo-classes and pseudo-elements. It lists various selectors with examples of how they can be used to select and style elements on a page based on their state, position, or type. Some of the selectors covered include ::before, ::after, :hover, :first-child, :active, :checked, :disabled, :enabled, :focus, :invalid, :link, :visited, :target, and more.

Uploaded by

Margerie Fruelda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
101 views5 pages

All CSS Pseudo Elements

The document describes different CSS pseudo-classes and pseudo-elements. It lists various selectors with examples of how they can be used to select and style elements on a page based on their state, position, or type. Some of the selectors covered include ::before, ::after, :hover, :first-child, :active, :checked, :disabled, :enabled, :focus, :invalid, :link, :visited, :target, and more.

Uploaded by

Margerie Fruelda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

All CSS Pseudo Elements

Selector Example Example description

::after p::after Insert something after the content of ea

::before p::before Insert something before the content of

::first-letter p::first-letter Selects the first letter of each <p> elem

::first-line p::first-line Selects the first line of each <p> eleme

::selection p::selection Selects the portion of an element that is

All CSS Pseudo Classes

Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element


:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no children

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first


child of its parent

:first-of-type p:first-of-type Selects every <p> element that is the first <p>
element of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a value within a


specified range

:invalid input:invalid Selects all <input> elements with an invalid


value

:lang(language) p:lang(it) Selects every <p> element with a lang


attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last
child of its parent

:last-of-type p:last-of-type Selects every <p> element that is the last <p>
element of its parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p>


element

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second


child of its parent

:nth-last- p:nth-last- Selects every <p> element that is the second


child(n) child(2) child of its parent, counting from the last child

:nth-last-of- p:nth-last-of- Selects every <p> element that is the second


type(n) type(2) <p> element of its parent, counting from the
last child

:nth-of-type(n) p:nth-of- Selects every <p> element that is the second


type(2) <p> element of its parent

:only-of-type p:only-of-type Selects every <p> element that is the only <p>
element of its parent
:only-child p:only-child Selects every <p> element that is the only
child of its parent

:optional input:optional Selects <input> elements with no "required"


attribute

:out-of-range input:out-of- Selects <input> elements with a value outside


range a specified range

:read-only input:read- Selects <input> elements with a "readonly"


only attribute specified

:read-write input:read- Selects <input> elements with no "readonly"


write attribute

:required input:required Selects <input> 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 <input> elements with a valid value


:visited a:visited Selects all visited links

You might also like