Pseudo-class and elements | Techbirds
Difference between a pseudo-class and a pseudo-element
Pseudo-Class
A pseudo-class is way of selecting certain parts of a HTML document, based in principle not on the HTML document tree itself and its elements or on characteristics like name, attributes or contents, but on other phantom conditions like language encoding or the dynamic state of an element.
The original pseudo-class defined dynamic states of an element that are entered and exited over time, or through user intervention. CSS2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree e.g. first-child. Pseudo-classes operate as if phantom classes were added to various elements.
RESTRICTIONS: Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain.
Example pseudo-class code:
a:link{ color: red; } a:visited{ color:gray; } a:visited{ color:gray; } a:hover, a:focus, a:active{ color: green;
}
Pseudo-elements
PSEUDO-ELEMENTS are used to address sub-parts of elements. They allow you to set style on a part of an element’s content beyond what is specified in the documents. In other words they allow logical elements to be defined which are not actually in the document element tree. Logical elements allow implied semantic structure to be addressed in CSS selectors.
RESTRICTIONS: Pseudo-elements may only be applied to external and document-level contexts – not to in-line styles. Pseudo-elements are restricted in where they can appear in a rule. They may only appear at the end of a selector chain (after the subject of the selector). They should come after any class or ID names found in the selector. Only one pseudo-element can be specified per selector. To address multiple pseudo-elements on a single element structure, multiple style selector/declaration statements must be made.
Pseudo-elements can be used for common typographic effects such as initial caps and drop caps. They can also address generated content that is not in the source document (with the “before” and “after”) An example style sheet of some pseudo-elements with properties and values added follows.
In CSS3 they are also written with “::”
There are 5 Pseudo-elements in CSS: :first-letter :first-line :after :before
:selection
Example:
p::first-letter{ color: green;
}
p::first-line{ color: blue;
}
1,572 total views, 1 views today
Share this On
