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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias