Saturday, 8 April 2017

CSS Pseudo-classes

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;}

Pseudo-classes

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Pseudo name
Description
:active
Adds a style to an element that is activated
:first-child
Adds a style to an element that is the first child of another element
:focus
Adds a style to an element that has keyboard input focus
:hover
Adds a style to an element when you mouse over it
:lang
Adds a style to an element with a specific lang attribute
:link
Adds a style to an unvisited link
:visited
Adds a style to a visited link

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
<p><b>Note:</b> Internet Explorer 8 (and higher) supports the :lang pseudo class
if a !DOCTYPE is specified.</p>
</body>
</html>

CSS Pseudo-elements

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;}

Pseudo-elements

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Pseudo name
Description
:after
Adds content after an element
:before
Adds content before an element
:first-letter
Adds a style to the first character of a text
:first-line
Adds a style to the first line of a text

No comments:

Post a Comment

Please write your view and suggestion....