CSS Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors.

---

Syntax

The syntax of pseudo-elements:

selector::pseudo-element {property:value;}

CSS classes can also be used with pseudo-elements:

selector.class::pseudo-element {property:value;}

---

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-line pseudo-element can only be applied to block-level elements.

Example

Format the first line of the text in p elements:

p::first-line
{
color:#ff0000;
font-variant:small-caps;
}

Try it yourself »

The following properties apply to the ::first-line pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

---

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The ::first-letter pseudo-element can only be applied to block-level elements.

Example

Format the first letter of the text in p elements:

p::first-letter
{
color:#ff0000;
font-size:xx-large;
}

Try it yourself »

The following properties apply to the ::first-letter pseudo- element:

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

---

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

p.article::first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

The example above will display the first letter of all paragraphs with class="article", in red.

---

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color: 

Example

p::first-letter
{
color:#ff0000;
font-size:xx-large;
}
p::first-line
{
color:#0000ff;
font-variant:small-caps;
}

Try it yourself »

---

CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before each <h1> element:

Example

h1::before
{
content:url(smiley.gif);
}

Try it yourself »

---

CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:

Example

h1::after
{
content:url(smiley.gif);
}

Try it yourself »

---

All CSS Pseudo Classes/Elements

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
::before	p::before	Insert content before every <p> element
::after	p::after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

---

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

---

Anchor Pseudo-classes

Links can be displayed in different ways in a CSS-supporting browser:

Example

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}   /* visited link */
a:hover {color:#FF00FF;}     /* mouse over link */
a:active {color:#0000FF;}    /* selected link */

Try it yourself »

	Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! a:active MUST come after a:hover in the CSS definition in order to be effective!! Pseudo-class names are not case-sensitive.

---

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

---

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

	Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

Try it yourself »

---

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

Example

<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Try it yourself »

---

Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

Example

<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Try it yourself »

---

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

	Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.

In the example below, the :lang class defines the quotation marks for q elements with lang="no":

Example

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Try it yourself »

---

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.

---

All CSS Pseudo Classes/Elements

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
::before	p::before	Insert content before every <p> element
::after	p::after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"