Difference between Pseudo class and Pseudo element

By March 13, 2017 Css No Comments
pseudo class

Number of developer who are new in CSS, a bit confused between Pseudo class and Pseudo element and what the difference between them.  Before going to tell you the difference between Pseudo class and Pseudo element, lets understand what are Pseudo class and Pseudo element. If you understand both the difference automatically clear to you.

Pseudo = Virtual

What is Pseudo classes?

A CSS pseudo-class selector matches components based on an additional condition and not necessarily defined by the document tree.

A pseudo-class is state or a special condition of something(ID, Class, Tag) in the DOM(Document Object Model).  A pseudo-class is a class that gets associated by the browser or DOM, usually as a response to a change in state. like hover, active, focus etc.

The pseudo-class enable to access information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class starts with a colon ( :).  Its syntax can be given with:

Syntax

The syntax of pseudo-classes:

What is Pseudo Elements ?

PSEUDO-ELEMENTS are used to address or target sub-parts of elements. Pseudo-elements allow access to apply some style or css on a part of an element’s content beyond what is specified in the documents.

Pseudo-elements create  abstractions about the document tree beyond those specified by the document language. For instance, CSS selector do not offer any mechanisms to access the first letter or first line of an element’s content. but Pseudo-elements enable  to access sub information about the parent element.

A pseudo-class starts with a colon ( : or ::). 

User of Single Or Double Colon For Pseudo-Elements?

For differentiating pseudo-elements  from pseudo-classes, double colon (::) was introduced in CSS3, for example ::before and ::after from pseudo-classes such as :hover, :active and other. All modern browsers support double colons pattern for pseudo-elements except Internet Explorer (IE) 8 and below.

Difference between  Pseudo class and Pseudo element

The Shortest description that helped me to understand the main difference between  Pseudo classes and Pseudo element:

Pseudo-classes: Describe a special state of an DOM element.
Pseudo-elements:  Match virtual elements that are not accessible in Dom or document language.

 

Complete list of CSS Pseudo Classes:

The following section describes the most commonly used 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
: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
: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
: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 “read-only” attribute specified
:read-write input:read-write Selects <input> elements with no “read-only” 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

Complete list of CSS Pseudo Elements:

The following section describes the most commonly used pseudo elements.

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

 

 


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply