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
- Pseudo element
- 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>
