Dynamic Web Development with Seaside

8.2.3Pseudo Class Selector

Pseudo classes are similar to CSS classes, but they don’t appear in the XHTML source code. They are automatically applied to elements by the web browser, if certain conditions apply. These conditions can be related to the content, or to the actions that the user is carrying out while viewing the page. To distinguish pseudo classes from normal CSS selectors they all start with a colon.

:focus { background-color: yellow; }
:hover { font-weight: bold; }

The first rule specifies that elements (typically input fields of a form) get a yellow background, if they have focus. The second rule specifies that all elements will appear in bold while the mouse cursor hovers over them.

The following table gives a brief overview of pseudo classes supported by most of today’s browsers:

:active Matches an activated element, e.g. a link that is clicked.
:first-child Matches the first child of another element.
:first-letter Matches the first character within an element.
:first-line Matches the first line of text within an element.
:focus Matches an element that has the focus.
:hover Matches an element below the mouse pointer.
:link Matches an unvisited link.
:visited Matches a visited link.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.