Css what is pseudo class

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 mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

Anchor Pseudo-classes

Links can be displayed in different ways:

Example

/* 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 HTML Classes

Pseudo-classes can be combined with HTML classes:

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

Example

Hover on

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

Example

Simple Tooltip Hover

Hover over a element to show a

element (like a tooltip):

Hover over me to show the

element.

Example

p <
display: none;
background-color: yellow;
padding: 20px;
>

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

element

In the following example, the selector matches any

element that is the first child of any element:

Example

Match the first element in all

elements

In the following example, the selector matches the first element in all

elements:

Example

Match all elements in all first child

elements

In the following example, the selector matches all elements in

elements that are the first child of another element:

Example

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 elements with lang=»no»:

Example

Some text A quote in a paragraph Some text.

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes

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

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every element
::before	p::before	Insert content before every element
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

Источник

The Difference Between Pseudo-Classes and Pseudo-Elements in CSS

Natalie Pina

In CSS, pseudo-classes and pseudo-elements are two types of keywords that you can combine with selectors. They are used to target the element’s state or specific parts of an element.

In this article, we’ll explore the differences between the two along with their history and best practices.

Syntax

Pseudo-Classes vs Pseudo-Elements

Pseudo itself means false, unreal, or fake. The prefix pseudo- , is used to reference classes or elements that are not «real». Not real in this context means not a DOM (Document Object Model) element, but instead a virtual element created for styling purposes.

To form a better definition, let’s discuss the difference between pseudo-classes and pseudo-elements in greater detail.

What are Pseudo-Classes in CSS?

Pseudo-classes ( : ) are primarily used to style an element that’s under various states. When referring to state, this includes the condition or user behavior, for example hover, active, focus, or disabled. States generally involve user interaction.

For example, we can target all links to have a text color of lavender when the user hovers over the link.

Inspect the Chrome DevTools and you will find other examples of state. Here you can also test out and debug applied styles based on the state (and the related pseudo-class used) by toggling them on and off.

There are over 50 types of pseudo-classes, so I highly suggest looking over all of the possibilities.

Test out the code example below, inspect the pseudo-classes, and try to add a new one.

Functional Pseudo-Classes

Another variation of the pseudo-class type is the functional pseudo-class. These function calls take in a parameter of a selector-list to match elements.

Unlike other types of pseudo-classes that target static state such as hover, these can dynamically target events and user interactions.

:is() /* The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. */ :not() /* The negation, or matches-none, pseudo-class represents any element that is not represented by its argument. */ :where() /* The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. */ :has() /* The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element. */

What are Pseudo-Elements in CSS?

Pseudo-elements ( :: ) are used to style specified parts of an element. They can be used to target the first letter or first line. Or they can be used to insert content before or after the element.

It’s worth getting familiar with this index of pseudo-elements to learn more about the available keywords.

As an example, to create a large first letter of a paragraph, you can do that using first-letter like this:

Another common example of a pseudo-element is to use ::before or ::after to insert content before or after the targeted element.

Test out the code example below to see how you can use ::before and ::after to create lines before and after a text element.

The Difference between : and :: in CSS

As a takeaway, remember that there is a key difference between a single and double colon. Most importantly that : refers to pseudo-classes and :: refers to pseudo-elements.

History of the ::

Historically, there was only a single colon : to both define pseudo-classes and pseudo-elements. The :: notation was introduced with CSS3 as a way to differentiate the two.

Pseudo-elements and pseudo-classes are related concepts that provide different ways to style an element. As a result, the slight variation in syntax between them is logical.

Using only the single colon syntax is not recommended for both, as it has become deprecated. Browsers will still accept : for both currently, for backwards compatibility reasons. Since it’s possible to encounter either syntax, understanding the historical context around this is beneficial.

Best Practices for using : vs ::

The best practice when choosing which colon syntax to use is to stick with current standards of CSS3. Following these standards will improve the maintainability of your codebase, so it’s helpful to keep and enforce guidelines around this for your codebase.

It will also help to future-proof your CSS. As we discussed, browsers currently accept the single colon syntax for both, but that may not always be the case. By using the double-colon syntax for pseudo-elements, you can help prevent errors and bugs in the future as CSS continues to change and evolve.

The syntax distinction between the two offers readability improvements. This clarifies what you are targeting, and is helpful when dealing with intricate selectors that involve multiple pseudo-elements and pseudo-classes together.

Wrapping Up

Understanding the difference between a pseudo-class and a pseudo-element is essential for writing maintainable CSS. Pseudo-classes are used to target state. Pseudo-elements are used to target specific parts of an element.

I hope this article helped to understand the differences between pseudo-classes and pseudo-elements, along with the history, and best practices when using them.

If you want to learn more about CSS, you can find me on Twitter.

Источник