Pseudo-class selectors

Pseudo-classes add special effects to selectors.

Pseudo-classes add special effects to selectors.

Pseudo-class Description CSS Example
active Applies to an element when it is in the process of being activated, for example, when the user holds the pointer down over it. 
a:active {
 font-weight:bold;}
first-child Applies to an element that is the first child of some other element, for example, the first p that is a child of div. The same as :nth-child(1). 
div > p:first-child {
 border-width:thin;}
focus Applies to an element when it has a keyboard focus, for example, an xforms:input element when the user is entering data. 
xforms|input:focus {
 background:yellow;}
hover Applies to an element when a mouse pointer is hovering over the element, for example, an a element when the user holds the pointer over it but does not activate the link. 
a:hover {
 color:black;}
invalid Specifies all style changes that are applied to an XForms element when its value fails validation. 
xforms|input:invalid {
 color:red;}
in-range Applies to an XForms element that has a data range defined when the entered data are within that range. 
xforms|input:in-range {
 color:green;}
last-child

Represents an element that is the last child of some other element, for example, a p element that is the last child of its parent. The same as :nth-last-child(1).

Note:

Not supported in XDIME 1.

 
p:last-child {
 color:red;}
link Applies to links, for example, an a element that is a link. 
a:link {
 color:red;}
nth-child() Applies to elements on the basis of their positions within a parent element’s list of child elements. It requires an argument which can be a keyword 'odd' or 'even', a number, or a formula: an+b. In the latter case, for values of a and b greater than zero, it divides child elements into groups of a elements and selects the bth element of each group. The a and b values must be integers. The index of the first child of an element is 1. For example, authors can apply style rules to every other tr element in a table. 
tr:nth-child(odd) {
 color:black;}
tr:nth-child(even) {
 color:silver;}
nth-last-child()

Matches every element that is the nth child, regardless of type, of its parent, counting from the last child. It requires an argument which can be a keyword 'odd' or 'even', a number, or a formula. In the latter case, it represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n, and has a parent element. The a and b values must be integers. The index of the first child of an element is 1. For example, matches every p element that is the second child of its parent, counting from the last child.

Note:

Not supported in XDIME 1.

 
p:nth-last-child(2) {
 color:blue;}
only-child

Represents an element that has a parent element and whose parent element has no other element children, for example, an li element that is the only child of its parent. The ame as :first-child:last-child.

Note:

Not supported in XDIME 1.

 
li:only-child {
 color:green;}
optional Applies to optional XForms fields. 
xforms|input:optional {
 color:blue;}
out-of-range Applies to an XForms element that has a data range specified when the entered data are outside that range. 
xforms|input:out-of-range {
 color:red;}
required Applies to mandatory XForms fields. 
xforms|input:required {
 color:red;}
root

Applies to an element that is the root of the document.

Note:

MCS applies styles after any DCI operations have been processed, and therefore this pseudo-class selector will not match the root element of a document that is included inside another one.

Note:

By default, MCS does not apply styles to html elements. Refer to the topic entitled xdime2 for more information.

 
:root {
 color:red;}
valid Specifies all style changes that are applied to an XForms element when its value passes validation. 
xforms|input:valid {
 color:blue;}
visited Applies when a link has been previously visited, for example, a dfn element that is a visited link. 
dfn:visited {
 color:blue;}
mcs-busy Defines a busy state of a Status Update widget. 
ticker|update-status:mcs-busy {
 content:"Busy...";}
mcs-change(FROM, TO) Represents an element whose state has changed from one state to another. This pseudo-class allows page authors to associate transition effects with the change of the state of an element. The states, FROM and TO, are represented as pseudo-classes. Please note that this pseudo-class can only be used with the effect related properties, specifically mcs-effect-style, mcs-effect-duration and mcs-frame-rate, and the following pseudo-classes: :mcs-displayed and :mcs-concealed. For example, the 'wipe(top)' effect can be associated with the appearance and disappearance of an element. 
ui|box:mcs-change(:mcs-concealed, :mcs-displayed) {
  mcs-effect-style: wipe(top);
  mcs-effect-duration: 0.2s;
  mcs-frame-rate: 25hz;}
ui|box:mcs-change(:mcs-displayed, :mcs-concealed) {
  mcs-effect-style: wipe(top);
  mcs-effect-duration: 0.2s;
  mcs-frame-rate: 25hz;}
mcs-concealed The concealed state is the state that an element is in when it is not displayed, i.e. has display: none. 
widget|popup:mcs-concealed {
 mcs-effect-style:puff;}
mcs-disabled Allows styling on the elements in the disable state, such as widget:next, widget:play, etc. For example, widget:next is disabled if the end of the gallery was reached. 
widget|play:mcs-disabled {
 display:none;}
mcs-displayed Represents an element which is being displayed. 
ui|box:mcs-change(:mcs-concealed, :mcs-displayed) {
  mcs-effect-style: wipe(top);
  mcs-effect-duration: 0.2s;
  mcs-frame-rate: 25hz;}
mcs-failed Specifies a failed state of a Status Update widget. 
ticker|update-status:mcs-failed {
 content:"Failure: ";
 font:red;}
mcs-invalid Specifies all style changes that are applied after validation has failed. 
xforms|*:mcs-invalid {
 color:red;}
mcs-normal The normal state of a Status Update widget. 
ticker|update-status:mcs-normal {
 content:"OK";}
mcs-suspended The suspended state of a Status Update widget. 
ticker|update-status:mcs-suspended {
 content:"Suspended";}
mcs-unfolded Controls the unfolded state. It is set for the label of a submenu. 
nl.special > label:mcs-unfolded {
 color:red;}
nl.special > label:mcs-unfolded::marker {
 content:url('unfolded.gif');}

Related topics