CSS Pseudo Elements Selectors

CSS Pseudo Elements Selectors

CSS Pseudo Elements Selector is used to select a specific part of HTML Element. For example first line of element or first letter or content before or after an element.

Use of CSS Pseudo Elements Selectors

Pseudo Elements Selectors are used to select the specific part of element. They can be used to insert the content before HTML Element or after HTML Element.

For example: Pseudo Elements Selector after is used to insert content after the html element.

Syntax of CSS Pseudo Elements Selectors

The syntax of CSS Pseudo Elements Selector is shown below.

p::first-line {
color: #red;
}

Double Colon(::) is an important part of all Pseudo Elements Selectors.

Example of CSS Pseudo Elements Selectors

Look at the simple example below, this simple example will change the color of only first letter of the paragraph element.

p::first-letter {
color: red;
}

This next example will insert the image of car before the H1 HTML Element.

h1::before {
content: url(car.jpg);
}

This next example will change the color of selected text to red.

::selection {
color: red;
}

List of CSS Pseudo Elements Selectors

The List of all CSS Pseudo Elements Selectors is given below.

CSS Pseudo Elements Selectors Example Description
::after p::after It inserts something after the content of each paragraph element.
::before p::before It inserts something before the content of each paragraph element.
::first-letter p::first-letter It selects only first letter of paragraph element.
::first-line p::first-line It selects only first line of paragraph element.
::selection p::selection It selects the part of paragraph element that is selected by user.

More CSS Selectors

Simple CSS SelectorsCSS Attribute SelectorsCSS Attribute Value SelectorsCSS Combinator SelectorsCSS Pseudo Class Selectors

Post a Comment

Previous Post Next Post