40-pseudo-clases en css

Pseudo-clases se usan para defenir un estado de un elemento

por ejemplo se usan pseudo-clases para:

• Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre él
• Estilo de enlaces visitados y no visitados de manera diferente
• Dale estilo a un elemento cuando se enfoca

Sintaxis

selector:pseudo-class {
    property: value;
}

...

En los enlaces los podemos mostrar de diversas maneras, como por ejemplo cuado se visita ese enlace, o cuando pasamos el mouse nel mismo, cuando ya fue visitado el color lo ponemos distinto, tambien cuando el enlace esta activo se puede mostrar diferente:

     /* unvisited link */
     a:link {
       color: #FF0000;
     }
     
     /* visited link */
     a:visited {
       color: #00FF00;
     }
     
     /* mouse over link */
     a:hover {
       color: #FF00FF;
     }
     
     /* selected link */
     a:active {
       color: #0000FF;
     } 
    

Nota: a:hover DEBE venir después a:link y a:visited en la definición de CSS para ser efectivo! a:active DEBE venir después a:hover en la definición de CSS para ser efectivo! Los nombres de pseudo clases no distinguen entre mayúsculas y minúsculas.

Pseudo-clases y Clases HTML

Las pseudo-clases se pueden combinar con clases html

Un ejemplo es cuando pasas el rato sobre un enlace, este se cambia de color, pues esto es una pseudo-clase

podemos hacer el ismo ejemplo con un DIV o con otro elemento html, por ejemplo un parrafo p

Desplazamiento de información en un parrafo p

Si pasamos el rato sobre un div podemos lograr que se muestro un parrafo que esta oculto

<div>Hover over this div element to show the p element
<p>Tada! Here I am!</p>
</div>
    

Los estilos CSS para lograr el efecto seria el seguiente:

        p {
            display: none;
            background-color: yellow;
            padding: 20px;
          }
          
          div:hover p {
            display: block;
          }
    

La pseudo-clase :first-child

pseudo-clase :first-child coincide con un elemento especificado que es el primer hijo de otro elemento.

ejemplo

estilos css

p:first-child {
 color: blue;
} 
    

html del ejemplo

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>
    

vamos hacer coincidir los primeros i de cada elemento

Los estilos del ejemplo

p i:first-child {
    color: blue;
  }
    

el html

<p>soy una <i>persona</i> fuerte. soy una <i>persona</i> fuerte.</p>
<p>soy una <i>persona</i> fuerte. soy una <i>persona</i> fuerte.</p>
    

Ir al indice