Pseudo Selectors

A CSS pseudo-element is used to style specified parts of an element. Pseudo-selectors are represented by : sign. In pseudo “p” is the silent word.

pseudo has a most commonly used selector called :hover.


For Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <h3 class="select">Hello Friends</h3>
</body>
</html>

Copy this code and paste it into .html file.

CSS:

.select {
    color: blue;
}

.select:hover {
    color: black;
}

Copy this clipboard and paste it into .css file.

And now the text color is blue and if you put the mouse arrow on a text it changes color to black, this is called pseudo selectors.


There are many pseudo selectors if you want to check all of them, the link is given below:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Comments

Popular Posts