CSS Pseudo Classes

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Pseudo Classes

A pseudo-class is used to define a special state of an element.

Selector: Pseudoclasses { 
    … 
}

:hover

When the mouse is placed on an element, this class suspicion is activated.

a:hover {
    color: red;
}

:link

Used to select and style unvisited links.

a:link {
    color: aqua;
}

:visited

Used to Select and style visited links.

a:visited {
    color: red;
}

:active

Used to select and style the active link.

a:active {
    color: blue;
}

:nth-child

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.

/* Select the 3th list item */
li: nth-child(3) { }
/* Select every other list item starting with first */
li: nth-child(odd) { }
/* Select every 3rd list item starting with first */
li: nth-child (3n - 2) { }
/* Select every 3rd child item, as long as it has class "el" */
.el: nth-child(3n) { }

:first child

Used to Select and style every first child of parent.

li:first-child {
    background: yellow;
}

:last child

Used to Select and style every last child of parent.

li:last-child {
    background: red;
}

:Not()

This selector represents elements that do not match a list of selectors. Set a color for all elements that are not a <ul> element:

:not(ul) {
    color: #ff0000;
}

:Lang()

The :lang() pseudo-class selector in CSS matches elements based on the context of their given language attribute. Set background for any <p> element with lang="en" attribute.

p:lang(en) {
    color: yellow;
}

:focus

This CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

input:focus {
    background-color: green;
}

:first-letter

It is a pseudo-element that selects the first letter in the first line of a block-level element (such as a paragraph <p>), if that letter is not preceded by any other content (such as images or inline tables) on its line.

p:first-letter {
    font-size: 24px;
}

:after

The CSS :after selector allows you to add content after a selected element. (use in css3).

p:after {
    content: "end";
}

:before

The CSS :before selector allows you to add content before a selected element. (use in css3)

p:before {
    content: "Start";
}

::after and ::before

These are like :after and :before but these work in CSS version 2.