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:
|
1 2 3 |
selector:pseudo-class { property:value; } |
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 |
[paypal-donation]
