A pseudo-class is utilized to specify a particular state of an element.
For instance, it can be employed to:
It can be utilized to:
The syntax of pseudo-classes:
| selector:pseudo-class { property: value; } |
Links can have various visual presentations.
|
a:link { |
| Ensure that in CSS definitions, a:hover follows a:link and a:visited to be functional. Similarly, a:active should come after a:hover for effectiveness. Pseudo-class names are not case-sensitive. |
When combined with HTML classes, pseudo-classes can modify element styles. In the provided example, hovering over the link triggers a color change.
Example
| a.highlight:hover { color: #ff0000; } |
Here’s an example of applying the :hover pseudo-class to a <div> element:
Example
| div:hover { background-color: blue; } |
To display a <p> element (like a tooltip) when hovering over a <div> element, do the following:
Example
| p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } |
The :first-child pseudo-class selects an element that is the first child of its parent element.
In this example, the selector targets any <p> element that serves as the first child of its parent.
Example
|
p:first-child { |
In this example, the selector targets the first <i> element within every <p> element.
Example
| p i:first-child { color: blue; } |
In this example, the selector targets all <i> elements within <p> elements that serve as the first child of their parent.
Example
| p:first-child i { color: blue; } |
The :lang pseudo-class enables the specification of unique rules for various languages.
In the example below, :lang sets the quotation marks for <q> elements with the lang attribute set to “no”.
Example
| <html> <head> <style> q:lang(no) { quotes: “~” “~”; } </style> </head> <body> <p>Some text <q lang=”no”>A quote in a paragraph</q> Some text.</p> </body> </html> |
|
Selector |
Example |
Example description |
|
:active |
a:active |
Selects the active link. |
|
:checked |
input:checked |
Selects all checked <input> element |
|
disabled |
input:disabled |
Selects all disabled <input> element |
|
p:empty |
Selects all <p> element that has no children |
|
|
input:enabled |
Selects all enabled <input> element |
|
|
p:first-child |
Selects all <p> elements that is the first child of its parent |
|
|
p:first-of-type |
Selects all <p> element that is the first <p> element of its parent |
|
|
input:focus |
Selects the <input> element that is focus |
|
|
a:hover |
Selects links when the mouse hovers over them. |
|
|
input:in-range |
Selects `<input>` elements with a value in a specified range. |
|
|
input:invalid |
Selects all `<input>` elements with an invalid value. |
|
|
:lang(language) |
p:lang(it) |
Selects every `<p>` element with a `lang` attribute value that starts with “it”. |
|
:last-child |
p:last-child |
Selects every `<p>` element 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 links that have not been visited. |
|
: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-child(n) |
p:nth-last-child(2) |
Selects every `<p>` 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 `<p>` element that is the second `<p>` element of its parent, counting from the last child. |
|
:nth-of-type(n) |
p:nth-of-type(2) |
Selects every `<p>` element that is the second occurrence within its parent. |
|
:only-of-type |
p:only-of-type |
Selects every `<p>` element that is the sole `<p>` element within its parent. |
|
:only-child |
p:only-child |
Selects every `<p>` element that is the sole child of its parent. |
|
:optional |
input:optional |
Selects `<input>` elements without a “required” attribute. |
|
:out-of-range |
input:out-of-range |
Selects `<input>` elements with a value outside of a specified range. |
|
input:read-only |
Selects `<input>` elements where the “readonly” attribute is specified. |
|
|
:read-write |
input:read-write |
Selects `<input>` elements without a “readonly” attribute. |
|
:required |
input:required |
Selects `<input>` elements where the “required” attribute is specified. |
|
:root |
root |
Selects the root element of the document. |
|
:target |
#news:target |
Selects the currently 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 links that have been visited. |
|
Selector |
Example |
Example description |
|
::after |
p::after |
Insert content before every <p> element |
|
::before |
p::before |
Insert content preceding every `<p>` element. |
|
::first-letter |
p::first-letter |
Selects the initial letter of each `<p>` element. |
|
::first-line |
p::first-line |
Selects the opening line of each `<p>` element. |
|
::marker |
::marker |
Selects the bullet points or numbering of list items. |
|
::selection |
p::selection |
Selects the part of an element that a user has highlighted or chosen. |
