Las pseudo-clases<\/strong> son usadas para definir un estado especial de un elemento. Por ejm, se pueden usar para:<\/p>\n\n\n\n La sintaxis ser\u00eda la siguiente:<\/p>\n\n\n\n Los enlaces pueden ser mostrados de diferentes maneras.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Nota<\/strong>: a:hover<\/em><\/strong> DEBE ir despu\u00e9s de a:link<\/em><\/strong> y a:visited<\/em><\/strong> en la definici\u00f3n de CSS<\/strong> para que sea efectivo. a:active<\/em><\/strong> DEBE ir despu\u00e9s de a:hover<\/em><\/strong> en la definici\u00f3n de CSS<\/strong> para que sea efectivo. Los nombres de pseudoclases<\/strong> no distinguen entre may\u00fasculas y min\u00fasculas.<\/p>\n<\/blockquote>\n\n\n\n Las pseudo-clases<\/strong> se pueden combinar con las clases HTML.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Veamos un ejm de usar hover en la etiqueta <div><\/em><\/strong>.<\/p>\n\n\n\n Pasa el cursor sobre un elemento <div><\/em><\/strong> para mostrar un elemento <p><\/em><\/strong> (como una informaci\u00f3n sobre herramientas).<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n La pseudoclase :first-child<\/em><\/strong> coincide con un elemento especificado que es el primer hijo de otro elemento.<\/p>\n\n\n\n En el siguiente ejemplo, el selector coincide con cualquier elemento <p><\/em><\/strong> que sea el primer hijo de cualquier elemento.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n\n
Sintaxis<\/h2>\n\n\n\n
selector:pseudo-clase {\n propiedad: valor;\n}<\/pre>\n\n\n\nAnchor Pseudo-classes<\/h2>\n\n\n\n
\/* enlace no visitado *\/\na:link {\ncolor: #FF0000;\n}\/* enlace visitado*\/\na:visited {\ncolor: #00FF00;\n}\/* bot\u00f3n sobre enlace *\/\na:hover {\ncolor: #FF00FF;\n}\/* enlace seleccionado *\/\na:active {\ncolor: #0000FF;\n}<\/pre>\n\n\n\n\n
Pseudo-clases y clases HTML<\/h2>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
<\/style>
<\/head>
<body>
<h2>Pseudo-clases y clases HTML<\/h2>
<p>
Cuando pasa el cursor sobre el primer enlace a continuaci\u00f3n, cambiar\u00e1 el
color y el tama\u00f1o de fuente:
<\/p>
<p><a class=\"highlight\" href=\"css_syntax.asp\">Sintaxis CSS<\/a><\/p>
<p><a href=\"default.asp\">CSS Tutorial<\/a><\/p>
<\/body>
<\/html><\/pre>\n\n\n\nHover en <div><\/h2>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
<\/style>
<\/head>
<body>
<p>
Pasa el mouse sobre el elemento div a continuaci\u00f3n para cambiar su color
de fondo:
<\/p>
<div>Mouse Over Me<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nSimple Tooltip Hover<\/h2>\n\n\n\n
<!DOCTYPE html>
<html lang=\"es\">
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
<\/style>
<\/head>
<body>
<div>
Situate sobre este elemento para mostrar el elemento p
<p>Ahora me muestro<\/p>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nLa pseudo-clase :first-child<\/h2>\n\n\n\n
Coincide con el primer elemento <p><\/h3>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
<\/style>
<\/head>
<body>
<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>
<\/body>
<\/html><\/pre>\n\n\n\nCoincide con el primer elemento <i> en todos los elementos <p><\/h3>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
<\/style>
<\/head>
<body>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<\/body>
<\/html><\/pre>\n\n\n\nHacer coincidir todos los elementos <i> en todos los primeros elementos secundarios <p><\/h3>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
<\/style>
<\/head>
<body>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<div>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<p>I am a <i>strong<\/i> person. I am a <i>strong<\/i> person.<\/p>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nTabla de pseudo-clases<\/h2>\n\n\n\n