Скачать или смотреть CSS Tutorial for Beginners Part 26 - Pseudo-classes | Learn Web Technologies

CSS Playlist
   • CSS Tutorial for Beginners  

HTML Playlist
   • Html tutorial for beginners  

Sign up for my newsletter to receive weekly updates
http://bit.ly/2RRFktj

Join our facebook page
bit.ly/2OKQYV7

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:
/* 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 CSS Classes
Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:

Hover on div
An example of using the :hover pseudo-class on a div element:

Simple Tooltip Hover
Hover over a div element to show a p element (like a tooltip):

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:

Match the first i element in all p elements
In the following example, the selector matches the first i element in all p elements:

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:

----------------------------------------------------------------------------------------------------------------

#LearnWebTechnologies #CSS #CSSTutorialForBeginners