CSS Pseudo Classes | CSS: Presentation Layer
Standards Based Development
Pseudo Class Declaration Ordering
lhva (Link Visited Hover Active).
A pseudo-class is way of selecting certain parts of a html document, based in principle not on the html document tree itself and its elements or on characteristics like name, attributes or contents, but on other phantom conditions like language encoding or the dynamic state of an element.
The original pseudo-class defined dynamic states of an element that are entered and exited over time, or through user intervention. css2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree (first-child). Pseudo-classes operate as if phantom classes were added to various elements.
Note: Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain..
a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}
The pseudo-class concept permits selection based on information that is outside of the document tree or that cannot be expressed using simple selectors.
Dynamic pseudo-classes classify elements on characteristics other than their name, attributes, or content. Dynamic pseudo-classes do not appear in the document source or document tree.
Link Pseudo-Classes: link and visited
link and visited are mutually exclusive.
User Action Pseudo-Classes: hover, active, and focus
User action pseudo-classes are provided for the selection of an element the user is acting on.
hover
hover applies while a user designates an element with a pointing device, but doesn't necessarily activate it. User Agents that do not support interactive media do not have to support hover and some uss that do support interactive media may not be able to support hover, like a pen device that does not detect hovering.
active
active applies while an element is being activated by a user.
focus
focus applies while an element has the focus, as in accepting keyboard or mouse events, or other forms of input.
Target Pseudo-class target
uris that refer to a location within a resource (fragment identifiers) end with # followed by an anchor identifer. The element that a fragment identifier links to is known as the target element.
Note: if a document's uri has no fragment identifier, then the document has no target element.
Language Pseudo-class lang
lang makes it possible to write selectors that represent an element based on its language.
ui Element States Pseudo-classes
enabled
enabled represents ui elements that are in an enabled state; such elements have a corresponding disabled state.
disabled
disabled represents ui elements that are in a disabled state; such elements have a corresponding enabled state.
checked
checked represents elements that can be toggled by a user. Typical toggleable elements are input type="radio" / and input type="checkbox" /. When such elements are toggled "on", checked is applied.
The checked is dynamic in nature, and can be altered by the user, since it can also be based on the presence of semantic attributes in the document, it applies to all media. For example, the checked pseudo-class intially applies to such elements that have the html4 attributes selected and checked, but of course the user can toggle off such elements in which case the checked pseudo-class would no longer apply.
Note: input type="radio" / and input type="checkbox" / can be toggled by the user, but are sometimes in an indeterminate state, that is, neither checked or unchecked, due to an element attribute, or dom manipulation. A future version of the html5 specification may introduce an indeterminate pseudo-class that would apply to such elements.
indeterminate
indeterminate represents toggleable elements that are neither checked or unchecked. This can occur due to an element attribute, or dom Manipulation.
Note: indeterminate is only mentioned in the css3 spec and is not standard.
Structural Pseudo-Classes
Structural Pseudo-Classes permit selection based on extra informtation within the document tree that cannot be represented by other simple selectors or combinators.
Structural Pseudo-Classes use function-like syntax (read: parentheses () which permit an argument to be passed, allowing element(s) to be selected based on a keyword, integer, or an expression.
root Root Pseudo-Class
root pseudo-class represents an element that is the root of the document; in html4, the root is always the html element.
nth-child() Nth-Child Pseudo-Class
nth-child(an+b) notation represents an element that has (an+b)-1 siblings before it in the document tree, for any positive integer or zero value of n and has a parent element. Values of a and b greater than zero, this effectively divides the element's children into groups of a elements (last group taking the remainder) and selecting the bth element of each group. The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1.
nth-child() can also take odd and even as keyword value arguments also. odd has the same signification as 2n+1 and even has the same signification as 2n.
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
When b is preceded by a negative sign, the + character in the expression must be removed (it is effectively replaced by the - character indicating the negative value of b).
:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */