CSS3 Topics

CSS Pseudo Selectors

February 07, 2021

 

All CSS Pseudo Selectors
SelectorExampleExample description
::afterp::afterInsert content after every <p> element
::beforep::beforeInsert content before every <p> element
::first-letterp::first-letterSelects the first letter of every <p> element
::first-linep::first-lineSelects the first line of every <p> element
::selectionp::selectionSelects the portion of an element that is selected by a user

CSS ::first-line Selector

Definition and Usage

Example

Select and style the first line of every <p> element:

p::first-line {
  background-color: yellow;
}

The ::first-line selector is used to add a style to the first line of the specified selector.

Note: The following properties can be used with ::first-line: 

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Note: The ::first-line selector can only be used with block-level elements.

Ex:

<head>
<style>
p::first-line {
  background-color: yellow;
}
</style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p></body>

CSS ::first-letter Selector

Definition and Usage

The ::first-letter selector is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter: 

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if float is 'none')
  • text-transform
  • line-height
  • float
  • clear

Note: The ::first-letter selector can only be used with block-level elements.

<head>
<style>
p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}
</style>

</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
</body>

CSS ::before Selector

Example

Insert some text before the content of each <p> element:

p::before {
  content: "Read this: ";
}

Ex ::
<style>
p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>

CSS ::after Selector

Example

Insert some text after the content of each <p> element:

p::after {
  content: " - Remember this";
}

Definition and Usage

The ::after selector inserts something after the content of each selected element(s).

Use the content property to specify the content to insert.

Use the ::before selector to insert something before the content.

<style>
p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

CSS ::selection Selector

Example

Make the selected text red on a yellow background:

::selection {
  color: red;
  background: yellow;
}

Definition and Usage

The ::selection selector matches the portion of an element that is selected by a user.

Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.