What is Pseudo Selectors in html?

0 votes
29 views
Ravi Vishwakarma asked 10 days ago in Web Application by Ravi Vishwakarma

What is Pseudo Selectors in html?

1 Answer

0 votes
Ethan Karla answered 7 days ago by Ethan Karla
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>