Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Selectors, Pseudo Classes, and Pseudo Elements

The following selector types, pseudo classes, and pseudo elements are available for use in CSS 2.1.

Selector:
Adjacent sibling selector

Description:
Selects an adjacent sibling (one that is directly adjacent to the first defined selector and that shares the same parents)

Example:

h1 + p {
text-indent: 0;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.

Selector:
Attribute selector

Description:
Selects an element based on its attributes

Example:

acronym [title] {
color: red;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.

Selector:
Child selector

Description:
Selects the children of a given element

Example:

#content > p {
padding: 10px;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.

Selector:
Class selector

Description:
Allows the creation of a custom class. Called in the HTML or XHTML using the class attribute within the element to be selected.

Example:

.notation {
font-size: xx-small;
}

Tips:
This selector is widely supported and, therefore, overused. Avoid overuse by streamlining CSS with descendant selectors instead.

Selector:
Descendant selector

Description:
Selects all the descendant elements of a parent element

Example:

#content p {
font-family: Arial, Helvetica, sans-serif;
}

Tips:
This selector is widely supported and should be used as often as possible, to reduce reliance on class selectors.

Selector:
ID selector

Description:
Allows the creation of a uniquely identified selector. Called in the HTML or XHTML using the id attribute within the element to be selected. Can be used only once per document.

Example:

#content {
margin-left: 25px;
margin-right: 25px;
}

Tips:
This selector is widely supported and typically used to describe sections of a document used for layout. It is also used to bind elements to scripts in DHTML.

Selector:
Universal selector

Description:
Selects all elements

Example:

* {
border: 1px dashed blue;
}

Tips:
This selector is very helpful when working with diagnostics, but it should be avoided for general use. Some problems with universal selector behavior exist in Internet Explorer versions.

Selector:
Element (type) selector

Description:
A selector matching the element type

Example:

h1 {
font-size: 22px;
}

Tips:
Very widely supported, this is the most commonly used selector.

Selector:
:active dynamic pseudo class

Description:
Selects an element while that element is being activated by the user

Example:

a:active {
color: red;
}

Tips:
This selector is widely supported. When styling links, you must follow the LoVe/HAte order of link, visited, hover, active, or results might be inconsistent.

Selector:
:after pseudo element

Description:
Used to insert generated text after the selected element

Example:

a:after {
content: link;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.

Selector:
:before pseudo element

Description:
Used to insert generated text before the selected element

Example:

a:before {
content: link;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.

Selector:
:firstchild pseudo class

Description:
Used to select the first child of an element only

Example:

p:firstchild em {
font-weight: bold;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.

Selector:
:firstletter pseudo element

Description:
Used to select the first letter of an element only

Example:

#content p:firstletter {
font-size: larger;
}

Tips:
Good support exists in all contemporary browsers. This selector is helpful in creating nonimage-based drop caps.

Selector:
:firstline pseudo element

Description:
Used to select the first line of an element only

Example:

#content p:firstline {
color: red;
}

Tips:
Good support exists in all contemporary browsers. This selector applies the style to the first line. If the line length changes because of browser resize, the style is still applied to whatever the first line is.

Selector:
:focus dynamic pseudo class

Description:
Applies the style when an element has focus (is accepting keyboard input, such as in a form)

Example:

input:focus {
border: 1px solid red;
}

Tips:
This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.

Selector:
:hover dynamic pseudo class

Description:
Applies the style when an element is hovered over with the mouse or pointing device

Example:

#toggle:hover {
border: 1px solid green;
}

Tips:
This selector is unavailable for use in Internet Explorer except as applied to the a element. Therefore, it is used primarily for enhancing styles in browsers that do support it.

Selector:
:lang pseudo class

Description:
Selects an element based on its language

Example:

p:lang(de) {
quotes: '»' '«' '\2039' '\203A'
}

Tips:
Inconsistent support exists. This selector is used for multilingual documents and internationalization.

Selector:
:link link pseudo class

Description:
Selects a link in the normal state

Example:

a:link {
color: #ccc;
}

Tips:
This selector is very widely supported. Remember the LoVe/HAte order rule, to avoid inconsistent behavior.

Selector:
:visited link pseudo class

Description:
Selects a link in the visited state

Example:

a:visited {
color: #333;
}

Tips:
This selector is very widely supported. Remember the LoVe/HAte order rule, to avoid inconsistent behavior.