HTML and CSS Reference
In-Depth Information
:lang(value)
- selects the elements that have a
lang
attribute that start with the
specified value
•
:last-child
- selects the elements that are the last child within its parent
•
:link
- selects all unvisited links
•
<tag>:last-of-type
- select the elements that are the last of the specified type within its parent
•
:nth-child(n)
- selects the elements that are the nth child within its parent
•
:nth-last-child(n)
- selects the elements that are the nth child within its parent,
counting in reverse
•
<tag>:nth-last-of-type(n)
- selects the nth child of the specified type within its parent,
counting in reverse
•
<tag>:nth-of-type(n)
- selects the nth child of the specified type within its parent
•
:only-child
- selects the elements that are the only child element of its parent
•
<tag>:only-of-type
- selects the elements that are the only sibling of the specified type
within its parent
•
:root
- selects the root element of the document
•
:target
- selects the elements with a target attribute where the target is the active element
•
:visited
- select all visited links
he
nth-child(n)
selector counts all child elements of the parent, while the
nth-of-type(n)
only counts
child elements of the specified type. The distinction here is subtle but important. The same is true with the
only-child
and
only-of-type
selectors.
•
Cautio
■
There are four pseudo classes that can be used with an anchor (
<a>
) element (
:link
,
:visited
,
:hover
, and
:active
). if you use more than one, they should appear in this order in the style rules. For example,
:hover
must come after
:link
and :visited if they are used. likewise,
:active
must come after
:hover
.
These pseudo-elements can be used to return a portion of the selected elements:
•
:first-letter
- selects the first character of every selected element
•
:first-line
- select the first line of every selected element
•
:selection
- returns the portion of an element that is selected by the user
You can add the
:before
or
:after
qualifiers to a selector to insert content in the document before or
after the selected elements. Use the
content:
keyword to specify the content and include any desired style
commands (the style only applies to the inserted content). For example, to add “Important!” before each
p
tag
that immediately follows a
header
tag, use the following rule:
header+p:before
{
content:"Important! ";
font-weight:bold;
color:red;
}