LECTURE 5
PSEUDO-CLASSES
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 mouse over it
Style visited and unvisited links differently
Style an element when it gets focus
PSEUDO-CLASSES
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
PSEUDO-CLASSES
Anchor Pseudo-classes
Links can be displayed in different ways:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
PSEUDO-CLASSES
/* 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
The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the
first child of another element.
p:first-child {
color: blue;
}
PSEUDO-CLASSES
The :last-child Selector
The :last-child selector matches every element that is the last child of
its parent.
p:last-child {
background: #ff0000;
}
PSEUDO-CLASSES
The :nth-child() Selector
The ::nth-child(n) selector matches every element that is the nth
child, regardless of type, of its parent.
n can be a number, a keyword, or a formula.
p:last-child {
background: #ff0000;
}
PSEUDO-CLASSES
The :focus Selector
The :focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard
events or other user inputs.
input:focus {
width: 250px;
}
PSEUDO-ELEMENTS
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
selector::pseudo-element {
property: value;
}
PSEUDO-ELEMENTS
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the
first line of a text.
p::first-line {
color: #ff0000;
}
Note: The ::first-line pseudo-element can only be applied to block-level
elements.
PSEUDO-ELEMENTS
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the
first letter of a text.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter pseudo-element can only be applied to block-level
elements.
PSEUDO-ELEMENTS
The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content
before the content of an element.
h1::before {
content: ”hello”;
}
PSEUDO-ELEMENTS
The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after
the content of an element.
h1::after {
content: ”hello”;
}
PSEUDO-ELEMENTS
The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that
is selected by a user.
::selection {
color: red;
background: yellow;
}
