---
title: "What is Pseudo Selectors in html?"  
description: "What is Pseudo Selectors in html?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93765/what-is-pseudo-selectors-in-html  
category: "web application"  
tags: ["css cascading style sheets", "html5", "javascript"]  
reading_time: 4 minutes  

---

# What is Pseudo Selectors in html?

What is Pseudo [Selectors](https://www.mindstick.com/interview/22831/what-is-the-use-of-selectors-in-objective-c) in [html](https://www.mindstick.com/articles/12368/why-are-html-themes-the-first-selection-of-designers)?

## Answers

### Answer by user

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to • Style the first letter, or line, of an element • Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements:

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

**::first-line Pseudo-element** The ::first-line pseudo-element is used to add a special style to the first line of a text. The following example formats the first line of the text in all <p> elements: **::first-letter Pseudo-element** The ::first-letter pseudo-element is used to add a special style to the first letter of a text. The following example formats the first letter of the text in all <p> elements: **::marker Pseudo-element** The ::marker pseudo-element selects the markers of list items.

```
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
</body>
</html>
```

**::selection Pseudo-element** ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection: color, background, cursor, and outline.

```
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
::marker {
  color: red;
  font-size: 23px;
}
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>
<p> Businesses are constantly innovating and balancing their methods to satisfy the rising demands of the customers. MindStick is the key to all your database development requirements. Our database experts design and maintain a distinct set of databases – traditional (MySQL, Oracle, SQL server) and alternative (No SQL). Given our vast domain expertise, we create custom database management systems that will keep your data arranged, protected, and easily available for users within your company. </p>
</body>
</html>
```

\

### Answer by Ethan Karla

pseudo-selectors are used to selecting the Html element on the web page. this pseudo selector is select a particular element. like selecting the first line of code, selecting the link, selecting the first letter, selecting the first child and n-th child, etc from the Html page. pseudo select any element fastly.

## Pseudo Selector works in two ways

1. Pseudo element
2. Pseudo class

## Pseudo element selector

pseudo-element selectors are used to selecting the single elements. like, change the color of the first letter, first line, etc.

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

Pseudo class selector

There are some pseudo-classes in CSS which are used to define special states of an element. With the use of pseudo-classes, we can apply a style to that element in a particular state of an element. E.g. To change the color of a visited, active, hover link.

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

\

## Some name of the selector

## \

| : link | unvisited link |
| --- | --- |
| : visited | visited link |
| : hover | mouse over link |
| : active | selected link |
| :: first-line | selecting the first line |
| :: first-letter | selecting the first letter |
| :: before | show data before complete precess |
| :: after | show data after complete the process |
| :: marker | styles the markers of list items |
| :: selection | makes the selected text |

##

## Example

```
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: 200%;
}
p::selection {
  color: white;
  background: black;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pharetra elit sit amet semper. Fusce sagittis ut felis et iaculis. Duis at velit dui. Curabitur ultricies, metus id varius vulputate, eros lacus mattis velit, ac blandit diam purus non elit. Morbi nec faucibus nisl, at vulputate erat. In lacinia rutrum nibh, at cursus lorem ultricies ac. Duis facilisis eu sapien nec congue. Quisque vel porttitor diam. In eget nibh et ipsum laoreet euismod eget et tellus.</p>
</body>
</html>
```

\


---

Original Source: https://answers.mindstick.com/qa/93765/what-is-pseudo-selectors-in-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
