Css - Pseudo Classes
What are Pseudo-classes?
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
Syntax :
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes :
• Links can be displayed in different ways:
Example :
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
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 HTML Classes :
• Pseudo-classes can be combined with HTML classes:
• When you hover over the link in the example, it will change color:
Example :
a.highlight:hover {
color: #ff0000;
}
Hover on <div> :
• An example of using the :hover pseudo-class on a <div> element:
Example :
div:hover {
background-color: blue;
}
Simple Tooltip Hover :
• Hover over a <div> element to show a <p> element (like a tooltip):
• Hover over me to show the <p> element.
Example :
p{
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p { display: block;}
CSS - The :first-child Pseudo-class :
• The :first-child pseudo-class matches a specified element that is the first
child of another element.
Match the first <p> element :
In the following example, the selector matches any <p> element
that is the first child of any element:
Example :
p:first-child {
color: blue;
}
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 :
p i:first-child {
color: blue;
}
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 :
p:first-child i {
color: blue;
}
CSS - The :lang Pseudo-class :
• The :lang pseudo-class allows you to define special rules for different
languages.
• In the example below, :lang 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>
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
● Style the first letter, or line, of an element
● Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::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 following example formats the first line of the text in all <p> elements:
Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line pseudo-element can only be applied to block-level
elements.
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 following example formats the first letter of the text in all <p> elements:
Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter pseudo-element can only be applied to block-level
elements.
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
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 the content of each <h1> element:
Example
h1::before {
content: url(smiley.gif);
}
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 the content of each <h1> element:
Example
h1::after {
content: url(smiley.gif);
}
CSS - The ::marker Pseudo-element
The ::marker pseudo-element selects the markers of list items.
The following example styles the markers of list items:
Example
::marker {
color: red;
font-size: 23px;
}
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected
by a user.
The following CSS properties can be applied to ::selection: color, background,
cursor, and outline.
The following example makes the selected text red on a yellow background:
Example
::selection {
color: red;
background: yellow;
}
