Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

CSS Pseudo Elements - Part 1

Notes:

CSS - Pseudo elements (selectors):

Pseudo classes are added to the selectors using : symbol
Pseudo elements are added to the selectors using :: symbol

Pseudo classes allow us to apply styles to html elements based on their current status or their special property

Pseudo elements allow us to apply styles to certain parts of html elements, and generate contents dynamically at run time.

Syntax of Pseudo element selectors:
selector :: pseudo-element-name
{
declaration list;
}

Ex:
p::first-letter
{
font-size:16pt;
}
It applies 16pt font size to first letter of any p element.

Ex:
p::first-line
{
text-transform : uppercase;
}
It transforms and displays all characters of the first line of any p element in upper case (capital letters)

Ex:
p::selection
{
background-color : yellow;
}
It sets background color to yellow to the selected text of any p element

Interview Questions: