Una clase Pseudo en CSS se usa para definir el estado especial de un elemento. Se puede combinar con un selector de CSS para agregar un efecto a los elementos existentes en función de sus estados. Por ejemplo, cambiar el estilo de un elemento cuando el usuario se desplaza sobre él o cuando se visita un enlace. Todo esto se puede hacer usando Pseudo Clases en CSS.
Tenga en cuenta que los nombres de las pseudoclases no distinguen entre mayúsculas y minúsculas.
Sintaxis:
selector: pseudo-class{
property: value;
}
Hay muchas pseudoclases en CSS, pero las que se usan más comúnmente son las siguientes:
- :hover Pseudo-clase: Esta pseudo-clase se usa para agregar un efecto especial a un elemento cuando el puntero del mouse está sobre él. El siguiente ejemplo demuestra que cuando su mouse ingresa al área del cuadro, su color de fondo cambia de amarillo a naranja.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}
.box:hover{
background-color: orange;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:hover Pseudo-class</h2>
<div class="box">
My color changes if you hover over me!
</div>
</body>
</html>
- Producción:
- :pseudoclase activa: esta pseudoclase se utiliza para seleccionar un elemento que se activa cuando el usuario hace clic en él. El siguiente ejemplo demuestra que cuando hace clic en el cuadro, su color de fondo cambia por un momento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}
.box:active{
background-color: orange;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:active Pseudo-class</h2>
<div class="box">
My color changes for a moment if you click me!
</div>
</body>
</html>
- Producción:
- :focus Pseudo-clase: Esta pseudo-clase se usa para seleccionar un elemento que actualmente está enfocado por el usuario. Funciona en los elementos de entrada del usuario utilizados en los formularios y se activa tan pronto como el usuario hace clic en él. En el siguiente ejemplo, el color de fondo del campo de entrada que actualmente está enfocado cambia.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
form{
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 2rem;
}
label{
width: 30%;
}
input{
background-color: default;
float: right;
}
input:focus{
background-color: grey;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:focus Pseudo-class</h2>
<form>
<label for="username">Username:</label>
<input type="text" name="username"
placeholder="Enter your username" />
<br>
<label for="emailid">Email-Id:</label>
<input type="email" name="emailid"
placeholder="Enter your email-id" />
<label for="Password">Password:</label>
<input type="password" name="Password"
placeholder="Enter your password" />
</form>
</body>
</html>
- Producción:
- :seudoclase visitada: esta pseudoclase se utiliza para seleccionar los enlaces que ya han sido visitados por el usuario. En el siguiente ejemplo, el color del enlace cambia una vez que se visita.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
body{
text-align: center;
}
h1, h2{
color: green;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:visited Pseudo-class</h2>
<p>
<a href="https://www.geeksforgeeks.org/" target="_blank">
My color changes once you vist this link
</a>
</p>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por rituraj_jain y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA