CSS-3 Structural pseudo

Structural pseudo-classes lets you select and style child elements of a container based on a variety of generic criteria, such as the 3rd child, even/odd child elements, or even the nth child element of a certain type. Learn all about them here. Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.

Table of Contents:

A pseudo-class and a pseudo-element are extensions to an element in a CSS document that configure how the document looks in specific situations.

Pseudo-classes

A pseudo-class is used to manipulate an element in a such way that cannot be done with simple selectors and/or access to the document source.

Syntax

A pseudo-class is normally between a selector and the first curly bracket, always starts with a colon ( : ), and this colon is always immediately followed by the name of the pseudo-class.

Some pseudo-classes have the option of placing a value between parentheses.

Dynamic pseudo-classes

A dynamic pseudo-class is a pseudo-class that configures an element based on a user action.

:link and :visited

The :link and :visited pseudo-classes are reserved exclusively for links ( <a>; anchor tags).

• The :link pseudo-class configures a link when it is unvisited; that is, the page to which a link redirects to has not been visited.

• The :visited pseudo-class applies to links that have been visited; that is, the page to which a link redirects to has been visited.

:hover, :active, and :focus

The :hover pseudo-class can apply to all elements, the :active pseudo-class normally applies to links (but can be applied to any element), and the :focus pseudo-class is used for text areas almost exclusively.

• The :hover pseudo-class is activated when a user "hovers" over an element with a mouse, trackpad, or any pointing device. To hover over an element, the cursor is normally placed on the element, but the user does not click on the element.

• The :active pseudo-class describes the look of an element between the time a user presses the mouse button and releases it. :active normally applies only to the primary button on a pointing device ("left-click" for most users).

• The :focus pseudo-class applies when an element that accepts keyboard, mouse, or any other form of input has focus. This concept may be hard to understand, so think of a text-area element as having focus when what you type on your keyboard appears in the element.

:target pseudo-class

Some URLs have a little number sign (#) near the end followed by some characters. What does this do?

Well, those little characters after the # sign refer to the id of some element, known as the target element. When you click on that link, the element with that id is selected by the :target pseudo-class.

The :target pseudo-class exploits this situation to create all sorts of interesting stuff. For example,

#red{ background-color: white; }
#red:target{ background-color: red; }

Familiarizing yourself with this pseudo-class may require some practice, which can be found here.

Structural pseudo-classes

A structural pseudo-class configures an element based on its position in the structure of the HTML document, or document tree.

:nth-child() pseudo-class

The :nth-child(an+b) pseudo-class notation is used to describe the element that is the th child of its parent, where and are integers and .

For positive values of and , the elements affected are determined by taking the modulo residue of , and then adding this residue onto consecutive multiples of (0 included). The resulting numbers specify which elements are to be affected in the document tree.

tr:nth-child(2n+1){ background-color: yellow; }

The :nth-child() pseudo-class can also take on "odd" and "even" as values between the brackets. "odd" is equal to , while "even" is equal to .

There are several rules to using the :nth-child() pseudo-class:

1. If , then the part may be removed, leaving just .
2. If , then it may be removed, leaving just .
3. If , then may be removed, leaving just .
4. If , then a minus sign (-) must be placed before the and the plus sign (+) must be omitted.
5. If , then , or else no element will be affected.

Note that for :nth-child(1), :first-child is a universally accepted replacement.

:nth-last-child() pseudo-class

The :nth-last-child(an+b) notation is used to describe the element that has an+b-1 siblings after it in a document tree.

See :nth-child() pseudo-class for syntax. :nth-last-child() also accepts "odd" and "even" as arguments.

Note that for :nth-last-child(1), :last-child is a universally accepted replacement.

:nth-of-type() pseudo-class

The :nth-of-type(an+b) notation is used to describe the element that has an+b-1 siblings of the same type before it in the document tree.

<html>
<body>
<ul>
<li class="a">A</li>
<li class="b">o</li>
<li class="b">P</li>
<li class="c">S</li>
</ul>
</body>
</html>

li.b:nth-of-type(2){ color: red; }

See :nth-child() pseudo-class for syntax. :nth-of-type() also accepts "odd" and "even" as arguments.

Note that for nth-of-type(1), :first-of-type is a universally accepted replacement.

:nth-last-of-type()

The :nth-last-of-type(an+b) notation is used to describe the element that has an+b-1 siblings of the same type after it in a document tree.

See :nth-child() pseudo-class for syntax. :nth-last-of-type() also accepts "odd" and "even" as arguments.

Note that for :nth-last-of-type(1), :last-of-type is a universally accepted replacement.

:not() pseudo-class

The :not(foo) pseudo-class represents an element that is not represented by the value within the brackets.

Basically, it excludes all elements that are represented in any way (class, id, etc.) by the argument.

div:not(#abc){ text-transform: uppercase; }

a:not(:hover){ color: lawngreen; }

span:not(:not(.hi)){ font-variant: small-caps; }

:matches()

The :matches(foo,bar) pseudo-class selects all elements that are selected by the selectors

foo

and

bar

.

:matches(main, aside) :matches(section, article) :matches(section, article) :matches(ul, ol, dl){
    color: black;
}

main section section ul, main section article ul,
main article section ul, main article article ul,
main section section ol, main section article ol,
main article section ol, main article article ol,
main section section dl, main section article dl,
main article section dl, main article article dl,
aside section section ul, aside section article ul,
aside article section ul, aside article article ul,
aside section section ol, aside section article ol,
aside article section ol, aside article article ol,
aside section section dl, aside section article dl,
aside article section dl, aside article article dl{
    color: black;
}

:any()

:any()

-webkit-

-moz-

-webkit-

Pseudo-elements

Pseudo-elements are used to manipulate elements in a such way that cannot be done with pseudo-classes and/or other simple selectors.

Pseudo-elements can also add information to a document without access to the source code itself.

Syntax

A pseudo-element consists of a colon (:) followed by the name of the pseudo-element.

span:first-letter{ background-color: orange; }
span:first-line{ background-color: orange; }

:before and :after pseudo-elements

The :before and :after pseudo-elements add content before or after an element's content respectively.

p:hover:before{
    content: ""; 
    border-width: 0 0 0 4px; 
    border-color: transparent blue; 
}

p:before:hover{
    content: ""; 
    border-width: 0 0 0 4px; 
    border-color: transparent blue; 
}

Adding content

To add content, we use the content property. There are several values for this property; the most useful are described here.

For more information on possible values that this property can take, see here.

:first-line pseudo-element

The first-line pseudo-element formats the first line of text in an element.

.message:first-line{ font-weight: bold; }

:first-letter pseudo-element

The :first-letter pseudo-element formats the first letter of text in an element.

#header h1:first-letter{ text-shadow: 0 0 15px #000 }

See Also

• The official W3C documentation for selectors, pseudo-classes, pseudo-elements, and combinators
• The MDN guide to CSS selectors, pseudo-classes, pseudo-elements, and combinators. Great for beginners.