What are CSS Pseudo-Classes?

By: Rajesh P.S.

Pseudo-classes are a powerful feature in CSS that allow you to target elements based on their state, like being hovered over, focused, checked, or in a specific position. This adds dynamic behavior and interactivity to your web pages without the need for additional JavaScript.

Common Pseudo-classes

:hover: Targets an element when the user's cursor hovers over it.

a:hover { background-color: lightblue; }

:link, : visited: Styles unvisited and visited links differently.

a:link { color: blue; } a:visited { color: purple; }

Continue Reading...

:active: Applies styles while the element is being clicked or activated.

button:active { border: 2px solid orange; }

:focus: Styles an element that has the focus (e.g., for form inputs).

input:focus { outline: 2px solid green; }

:target: Selects the element whose ID matches the URL's fragment identifier.

<a href="#section2">Go to Section 2</a> <div id="section2"> </div> #section2:target { background-color: yellow; }

:checked, : unchecked: Applies styles to checked and unchecked checkboxes and radio buttons.

input[type="checkbox"]:checked { background-color: green; } input[type="checkbox"]:unchecked { background-color: white; }

:nth-child(n), : nth-of-type(n): Selects elements based on their position among their siblings or elements of the same type.

ul li:nth-child(odd) { background-color: lightgray; } p:nth-of-type(2) { font-weight: bold; }

:nth-last-child(): Selects elements based on their position in a group of siblings, counting from the end.

ul li:nth-last-child(2) { font-style: italic; }

This will make the second-to-last <li> element within a <ul> element italic.

:nth-last-of-type(): Selects elements of a specific type based on their position among siblings of the same type, counting from the end.

div p:nth-last-of-type(odd) { text-transform: uppercase; }

This will transform the text to uppercase for odd numbered <p> elements inside <div> elements, counting from the end.

:first-child, : last-child, :only-child: Selects the first, last, or only child element.

h2:first-child { color: red; } li:only-child { border: 1px solid blue; }

:empty: Selects elements that have no content (not even whitespace).

p:empty { display: none; }

:lang(language-code): Selects elements based on their language (useful for multilingual websites).

p:lang(en) { color: black; } p:lang(fr) { color: blue; }

Example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Pseudo-classes Example</title> <style> /* :hover */ a:hover { color: red; text-decoration: underline; } /* :active */ button:active { background-color: gray; } /* :focus */ input:focus { border-color: blue; box-shadow: 0 0 5px blue; } /* :first-child */ ul li:first-child { font-weight: bold; } /* :last-child */ ul li:last-child { color: red; } /* :nth-child() */ tr:nth-child(even) { background-color: lightgray; } /* :nth-of-type() */ p:nth-of-type(2n) { color: blue; } /* :nth-last-child() */ ul li:nth-last-child(2) { font-style: italic; } /* :nth-last-of-type() */ div p:nth-last-of-type(odd) { text-transform: uppercase; } </style> </head> <body>  <a href="#">Hover over me</a>  <button>Click me</button>  <input type="text" placeholder="Click here">  <ul> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul>  <ul> <li>First Item</li> <li>Second Item</li> <li>Last Item</li> </ul>  <table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> </table>  <div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div>  <ul> <li>First Item</li> <li>Second-to-Last Item</li> <li>Last Item</li> </ul>  <div> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div> </body> </html>

Browser View

Hover over me

First Item
Second Item
Third Item

First Item
Second Item
Last Item

Row 1

Row 2

Row 3

Paragraph 1

Paragraph 2

Paragraph 3

First Item
Second-to-Last Item
Last Item

Paragraph 1

Paragraph 2

Paragraph 3

Additional Pseudo-classes:

:root: Selects the :root element (HTML element).
:enabled, :disabled: For form elements.
:placeholder-shown: Styles the placeholder text in input fields.
:dir(rtl): Applies styles for right-to-left languages.
:read-only, :read-write: For form elements.

Pseudo-classes are case-insensitive and are typically attached to existing selectors, such as button:hover or a:visited. They can also be combined with other selectors and pseudo-classes using combinators like +, >, ,, and !. It's worth noting that browser support for pseudo-classes varies, so it's always a good idea to consult resources like caniuse.com for compatibility information.

Conclusion

Pseudo-classes in CSS provide a way to style elements based on their state or position in the document tree, such as :hover or :nth-child(). They are case-insensitive, often attached to existing selectors, and can be combined with other selectors and pseudo-classes using various combinators.

Next > CSS Pseudo-elements

Related Topics

More Related Topics.....