> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/css/css-pseudo-classes.md).

# CSS Pseudo-classes

<mark style="color:purple;">A pseudo-class is used to define a</mark> <mark style="color:purple;"></mark><mark style="color:purple;">**special state**</mark> <mark style="color:purple;"></mark><mark style="color:purple;">of an element.</mark>

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

The syntax of pseudo-classes:

```
selector:pseudo-class {
  property: value;
}
```

### CSS Pseudo Classes

<table><thead><tr><th width="177.33333333333331">Selector</th><th>Example</th><th>Example description</th></tr></thead><tbody><tr><td><a href="https://www.w3schools.com/cssref/sel_active.asp">:active</a></td><td>a:active</td><td>Selects the active link</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_checked.asp">:checked</a></td><td>input:checked</td><td>Selects every checked &#x3C;input> element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_disabled.asp">:disabled</a></td><td>input:disabled</td><td>Selects every disabled &#x3C;input> element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_empty.asp">:empty</a></td><td>p:empty</td><td>Selects every &#x3C;p> element that has no children</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_enabled.asp">:enabled</a></td><td>input:enabled</td><td>Selects every enabled &#x3C;input> element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_firstchild.asp">:first-child</a></td><td>p:first-child</td><td>Selects every &#x3C;p> elements that is the first child of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_first-of-type.asp">:first-of-type</a></td><td>p:first-of-type</td><td>Selects every &#x3C;p> element that is the first &#x3C;p> element of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_focus.asp">:focus</a></td><td>input:focus</td><td>Selects the &#x3C;input> element that has focus</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_hover.asp">:hover</a></td><td>a:hover</td><td>Selects links on mouse over</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_in-range.asp">:in-range</a></td><td>input:in-range</td><td>Selects &#x3C;input> elements with a value within a specified range</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_invalid.asp">:invalid</a></td><td>input:invalid</td><td>Selects all &#x3C;input> elements with an invalid value</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_lang.asp">:lang(<em>language</em>)</a></td><td>p:lang(it)</td><td>Selects every &#x3C;p> element with a lang attribute value starting with "it"</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_last-child.asp">:last-child</a></td><td>p:last-child</td><td>Selects every &#x3C;p> elements that is the last child of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_last-of-type.asp">:last-of-type</a></td><td>p:last-of-type</td><td>Selects every &#x3C;p> element that is the last &#x3C;p> element of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_link.asp">:link</a></td><td>a:link</td><td>Selects all unvisited links</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_not.asp">:not(selector)</a></td><td>:not(p)</td><td>Selects every element that is not a &#x3C;p> element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_nth-child.asp">:nth-child(n)</a></td><td>p:nth-child(2)</td><td>Selects every &#x3C;p> element that is the second child of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_nth-last-child.asp">:nth-last-child(n)</a></td><td>p:nth-last-child(2)</td><td>Selects every &#x3C;p> element that is the second child of its parent, counting from the last child</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_nth-last-of-type.asp">:nth-last-of-type(n)</a></td><td>p:nth-last-of-type(2)</td><td>Selects every &#x3C;p> element that is the second &#x3C;p> element of its parent, counting from the last child</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_nth-of-type.asp">:nth-of-type(n)</a></td><td>p:nth-of-type(2)</td><td>Selects every &#x3C;p> element that is the second &#x3C;p> element of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_only-of-type.asp">:only-of-type</a></td><td>p:only-of-type</td><td>Selects every &#x3C;p> element that is the only &#x3C;p> element of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_only-child.asp">:only-child</a></td><td>p:only-child</td><td>Selects every &#x3C;p> element that is the only child of its parent</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_optional.asp">:optional</a></td><td>input:optional</td><td>Selects &#x3C;input> elements with no "required" attribute</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_out-of-range.asp">:out-of-range</a></td><td>input:out-of-range</td><td>Selects &#x3C;input> elements with a value outside a specified range</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_read-only.asp">:read-only</a></td><td>input:read-only</td><td>Selects &#x3C;input> elements with a "readonly" attribute specified</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_read-write.asp">:read-write</a></td><td>input:read-write</td><td>Selects &#x3C;input> elements with no "readonly" attribute</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_required.asp">:required</a></td><td>input:required</td><td>Selects &#x3C;input> elements with a "required" attribute specified</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_root.asp">:root</a></td><td>root</td><td>Selects the document's root element</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_target.asp">:target</a></td><td>#news:target</td><td>Selects the current active #news element (clicked on a URL containing that anchor name)</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_valid.asp">:valid</a></td><td>input:valid</td><td>Selects all &#x3C;input> elements with a valid value</td></tr><tr><td><a href="https://www.w3schools.com/cssref/sel_visited.asp">:visited</a></td><td>a:visited</td><td>Selects all visited links</td></tr></tbody></table>

<br>
