CSS: Pseudo Element Selector

Pseudo-element selectors in CSS allow you to style specific parts of an element. Unlike pseudo-classes, which represent a special state of an element, pseudo-elements target specific content within an element. The syntax for a pseudo-element is selector::pseudo-element { property: value; }. Note the use of double colons (::), which distinguishes pseudo-elements from pseudo-classes that use a single colon (:).

Here are some commonly used pseudo-elements:

• ::first-line: Targets the first line of text in a block-level element, such as a paragraph.
• ::first-letter: Targets the first letter of a block-level element.
• ::before: Inserts content before the content of the selected element.
• ::after: Inserts content after the content of the selected element.
• ::placeholder: Styles the placeholder text of an input field.
• ::selection: Styles the portion of an element that is selected by a user.

For example, to style the first line and first letter of all paragraphs, you could write:

CSS

p::first-line {
  color: blue;
  text-transform: uppercase;
}

p::first-letter {
  color: red;
  font-size: xx-large;
}

In this example, the first line of every paragraph will be blue and uppercase, and the first letter will be red and extra large.

Pseudo-elements can be combined with other selectors, including class and ID selectors, to increase specificity. For instance, p.intro::first-letter would target the first letter of paragraphs with the class intro.