CSS Pseudo Classes - Honar Systems

Pseudo Classes

CSS pseudo-classes are special selectors that allow you to target elements based on their state or position in the DOM. They can be used to style elements that are in a certain state, such as being hovered over, being active, or being the target of a link. They are an important part of CSS and are used to create dynamic styling on a page.

CSS pseudo-classes are an important part of CSS and are used to create dynamic styling on a page. They allow you to target elements based on their state or position in the DOM and can be used to create interesting effects and interactions on a page.

Selector: Pseudoclasses { 
    … 
}

:hover

The most common pseudo-class is the :hover pseudo-class, which allows you to style an element when it is being hovered over by the user. This is usually used to change the color or background of an element when the user’s mouse is over it.

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

a:hover {
    color: red;
}

Hover Me

:link

Used to select and style unvisited links.

a:link {
    color: aqua;
}

:visited

The :visited pseudo-class is used to style a link differently when it has already been visited by the user. This is often used to make visited links appear differently than unvisited links.

a:visited {
    color: red;
}

:active

The :active pseudo-class is used to style an element when it is being clicked or tapped on. This is often used to create a “pressed” effect on a button when it is being clicked.

a:active {
    color: blue;
}

:nth-child

The :nth-child pseudo-class is used to target a specific child element of a parent element. This can be used to style a specific item in a list differently than the other items.

The 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

The :first-child and :last-child pseudo-classes are used to target the first and last child elements of a parent element. This is useful for styling the first or last item in a list differently than the other items.

li:first-child {
    background: yellow;
}

:last child

Used to Select and style every last child of parent.

li:last-child {
    background: red;
}

:Not()

The :not pseudo-class is used to target elements that do not match a specific selector. This is useful for targeting elements that are not of a certain type or that do not have a certain class.

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

The :focus pseudo-class is used to style an element when it is in focus. This is usually used to highlight an input field or button when the user is focused on it.

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

This is paragraph1.

:before

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

p:before {
    content: "Start";
}