CSS Pseudo-elements selectors Tutorial

It is far harder to kill a phantom than a reality.

VIRGINIA WOOLF

When we want to select part of a page that can’t be selected using usual selector types because they are not part of HTML elements, we use new type of selector called Pseudo-Element Selector. (Pseudo means not real)

For example the first line of a paragraph or the first letter of a paragraph is not considered to be an HTML element.

This is the structure of Pseudo-Element type of selector:

selector::pseudo-element {
   property: value;
 }

There are two Pseudo-element selectors for selecting contents within paragraph elements like <p>:

1. ::first-line: using this type of selector, we can change format
   of the first line of a paragraph. (Note that we use double colon before
   first-line. (::first-line))

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
width: 400px;
}
p::first-line{
color:red;
}
</style>
</head>
<body>
<p>

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</p>
</body>
</html>

2. ::first-letter: using this type of selector, we can format the
   first letter of a paragraph. (Note that we use double colon before
   first-letter. (::first-letter))

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
width: 400px;
}
p::first-line{
color:red;
}
p:first-letter{
color:blue;
}
</style>
</head>
<body>
<p>

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</p>
</body>
</html>

Another type of Pseudo-Element selector is ::selection.

When a user click and drag to select a collection of elements (for example part of a paragraph), these elements are those that the declarations within declaration block of “::selection” selector will have effect on.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
::selection{
background-color: red;
}
</style>
</head>
<body>
<p>Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph.</p>
</body>
</html>

Note: The only properties you can set with this type of selector are color and background-color.

Here's another example combining "::selection" with "class attribute"
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
.red::selection{
background-color: red;
}
</style>
</head>
<body>
<p class= "red">Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.</p>
<h1>Any text you select in the paragraph below, will not turn in red</h1>
<p>Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.</p>
</body>
</html>

There are two other types of Pseudo-Element selectors:

::after & ::before

The “::after”& “::before” selectors are used to add a new child after and before the content of the target element.

• ::after= using this pseudo-element we add a child to the target
  element but after its content.

• ::before= using this pseudo-element we add a child to the target
  element but before its content.

For example let’s say you have a list of paragraphs and you want to start and end the content of each of those paragraphs with double quotation mark.

Here’s how you can do it:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p::after{

content: “””

}
p::before{

content: “””

}
</style>
</head>
<body>
<p>Imagination is everything. It is the preview of life's coming attractions.</p>
<p>Insanity: doing the same thing over and over again and expecting different results.</p>
<p>Albert Einstein</p>
</body>
</html>

Notes:

• You should remember that using “::after” and “::before”, would
  actually add two child to the target element.

• We first select these two pseudo-elements and then use the CSS
  `content` property in order to add content to them.