Scribd
Upload
10 views17 pages

Cascading Style Sheet Lecture 5

This document provides an overview of pseudo-classes and pseudo-elements in CSS, detailing their syntax and usage. Pseudo-classes allow styling based on an element's state, such as hover or focus, while pseudo-elements enable styling specific parts of an element, like the first letter or line. Examples are given for various pseudo-classes and pseudo-elements, including anchor pseudo-classes and the ::before and ::after pseudo-elements.

Uploaded by

caretronics77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views17 pages

Cascading Style Sheet Lecture 5

This document provides an overview of pseudo-classes and pseudo-elements in CSS, detailing their syntax and usage. Pseudo-classes allow styling based on an element's state, such as hover or focus, while pseudo-elements enable styling specific parts of an element, like the first letter or line. Examples are given for various pseudo-classes and pseudo-elements, including anchor pseudo-classes and the ::before and ::after pseudo-elements.

Uploaded by

caretronics77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like