Scribd
Upload
46 views29 pages

Web Technology Week 12 Lecture 4

This document discusses various CSS pseudo-classes and pseudo-elements. It provides examples of how to style links differently based on their visited/unvisited state using pseudo-classes like :link and :visited. It also explains how to change styles on hover or active states. Pseudo-elements like ::first-letter and ::first-line are covered, which allow styling the first letter or line of a block element. The document provides a comprehensive list of supported pseudo-classes and pseudo-elements.

Uploaded by

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

Web Technology Week 12 Lecture 4

This document discusses various CSS pseudo-classes and pseudo-elements. It provides examples of how to style links differently based on their visited/unvisited state using pseudo-classes like :link and :visited. It also explains how to change styles on hover or active states. Pseudo-elements like ::first-letter and ::first-line are covered, which allow styling the first letter or line of a block element. The document provides a comprehensive list of supported pseudo-classes and pseudo-elements.

Uploaded by

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

Web Technology

Semester- Spring 2020


Week 12
Prepare by:

Rabia Aslam Khan


Contents

 CSS Selector
 CSS Pseudo-classes
 CSS Pseudo-elements
 CSS Attribute Selectors
CSS Pseudo-classes
CSS 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
Syntax

 The syntax of pseudo-classes:


selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes

 Links can be displayed in different ways: /* mouse over link */


Example a:hover {
/* unvisited link */
color: #FF00FF;
a:link {
}
color: #FF0000;
}
/* selected link */

/* visited link */ a:active {


a:visited { color: #0000FF;
color: #00FF00; }
}
Cont.

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. When you hover over the link in the example, it
will change color:
Example 1
a.highlight:hover {
color: #ff0000;
}
Example 2
div:hover {
background-color: blue;
}
Simple Tooltip Hover

 Hover over a <div> element to show a <p> element (like a tooltip)


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":
CSS - The :lang Pseudo-class

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>
All Pseudo Classes

Selector Example Example description


:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
Selector Example Example description
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its
parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting
with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its
parent
Selector Example Example description
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its
parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of
its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of
its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its
parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified
range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
Selector Example Example description
:read-write input:read-write Selects <input> elements with no "readonly"
attribute
:required input:required Selects <input> elements with a "required" attribute
specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on
a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links
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:


Syntax
selector::pseudo-element {
property: value;
}
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;
}
 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
Double Colon Notation

the double colon notation - ::first-line versus :first-line


 The double colon replaced the single-colon notation for pseudo-elements in CSS3. This
was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
 The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2
and CSS1.
 For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1
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.
The following example formats the first letter of the text in all <p> elements:
Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
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
Pseudo-elements and CSS Classes

Example
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
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-line {
p::first-letter { color: #0000ff;
color: #ff0000; font-variant: small-caps;
font-size: xx-large; }
}
ALL CSS Pseudo Element

Selector Example Example description


::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::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
::selection p::selection Selects the portion of an element that is selected by a
user

You might also like