Clases seudo | CSS

Pseudo clases | CSS: En este artículo, vamos a aprender lo que Pseudo class es, ¿cuál es su sintaxis y cómo usarlo ?

Estas clases se utilizan básicamente para añadir efectos especiales a algunos selectores o, en otras palabras, podemos decir que A pseudo class se utiliza básicamente para definir un estado especial de un elemento.

A través pseudo-clases , que no requieren JavaScript o cualquier otro script class estos efectos.

La básica sintaxis de las pseudo-clases de la siguiente manera:

    selector:pseudo-class {property: value}

Podemos escribir también de otra manera, como sigue:

    selector.class:pseudo-class {property: value}

Los más utilizados pseudo-clases son:

  1. : enlace
  2. : visited
  3. : libración
  4. : activa
  5. : enfoque
  6. : first-child

Cuando estamos definiendo clases seudo en el medio de apertura y cierre de estilo etiqueta siguientes puntos deben tenerse en cuenta.

  1. La denominación de la clase de pseudo for no son sensibles.
  2. Estos son básicamente diferentes de clases CSS, pero luego se pueden combinar.
  3. Con el fin de hacer que la definición CSS siguientes puntos más eficaces deben ser tener en cuenta.

    1. a: hover debe venir después a: link y: visited
    2. una: que activar vienen después a: hover

usos básicos de pseudo-clases son los siguientes

  1. se puede utilizar con el estilo de un elemento cuando se mueve se mueven sobre ella.
  2. Se puede estilo visitaron y los enlaces no visitados de forma diferente.
  3. Podemos estilo de un elemento cuando se pone el foco.

Vamos a discutir las clases seudo comúnmente utilizado uno por uno:

1.: enlace

Esto se utiliza básicamente para añadir estilo especial a un enlace no visitado. El siguiente ejemplo muestra cómo utilizar el: case enlace para establecer el color del enlace.

<html>
<head>
<style type="text/css">
a:visited {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP!!!</a>
</body>
</html>

2.: visited

Esto se utiliza básicamente para añadir estilo al enlace visitado anteriormente. El siguiente ejemplo muestra cómo utilizar el: class visitado para establecer el color del enlace visitado previamente.

<html>
<head>
<style type="text/css">
a:visited {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

3.: libración

Esto se utiliza básicamente para añadir estilo especial para el elemento cuando se pasa el ratón sobre ella. El siguiente ejemplo muestra cómo utilizar el: class vuelo estacionario para cambiar el color de los enlaces cuando el ratón pasa sobre él.

<html>
<head>
<style type="text/css">
a:hover {
color: #0000FF
}
</style>
</head>
<body><a href="">Move Mouse here</a>
</body>
</html>

4. activo

Este class se utiliza básicamente para añadir estilo especial para el elemento que están activos. El siguiente ejemplo muestra cómo utilizar el: class activa para cambiar el color de los enlaces activos.

<html>
<head>
<style type="text/css">
a:active {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

5.: enfoque

Este class se utiliza básicamente para añadir el estilo especial al elemento que se centran. El siguiente ejemplo muestra cómo utilizar el: class enfoque para cambiar el color del enlace cuando está enfocado.

<html>
<head>
<style type="text/css">
a:focus {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>

6.: first-child

Este class se utiliza básicamente para añadir estilo especial al elemento que es el primer hijo de otro elemento.

<html>
<head>
<style type="text/css">
div >p:first-child {
text-indent: 25px;
color: #FF00FF;
}
</style>
</head>
<body>
<div>
<p>Here INCLUDEHELP is intendent</p>
<p>Here INCLUDEHELP is not indented</p>
</div>
<p>But this will not change the paragraph in HTML document:
</p>
<div>
<p>Here INCLUDEHELP will not be effected.
</p>
</div>
</body>


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *