Latest web development tutorials

CSS pseudo-clases

selectores CSS pseudo-clases se utilizan para agregar algunos efectos especiales.


gramática

sintaxis pseudo-clase:

selector:pseudo-class {property:value;}

clases CSS también pueden utilizar pseudo-clase:

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


seudo clases de anclaje

soporte de CSS en los navegadores, diferentes estado del enlace se puede mostrar en diferentes formas

Ejemplos

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

Trate »

Nota: definición CSS, a: hover debe ser colocado en una: un enlace y: después de visitar, es eficaz.

Nota: definición CSS, un activo debe ser colocado en un: hover después, para ser eficaz.

Nota: El nombre de lapseudo-clase no es sensible a mayúsculas.


Las pseudo-clases y clases CSS

Las pseudo-clases se pueden utilizar en combinación con clases CSS:

a.red:visited {color: # FF0000;}

<a class="red" href="css-syntax.html"> CSS Sintaxis </a>

Si el enlace anterior ejemplo se ha visitado, éste se mostrará en rojo.


CSS -: en primer lugar - los niños pseudo-clase

Se puede utilizar el: first-child pseudo-clase selecciona el primer elemento hijo

Nota: Usted debe ser declarado en la versión anterior de Internet Explorer 8 <! DOCTYPE> , así: primer niño tomar efecto.

Coincidir con el primer elemento <p>

En el siguiente ejemplo, el selector coincide con el elemento <p> como el primer hijo de cualquier elemento elementos:

Ejemplos

<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>

Trate »

Coincidir con todos los elementos <p> en el primer elemento <i>

El primer <i> en el ejemplo siguiente, el selector coincide con cualquier <p> elemento:

Ejemplos

<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Trate »

<H2 ajuste de todos como el primer elemento hijo del elemento <p> en todos los <i> elementos:

Ejemplos

<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Trate »

CSS -: lang pseudo-clase

: Lang pseudo-clase le permite tener la capacidad para diferentes idiomas definen reglas especiales

Nota: IE8, deberá incluir la <! DOCTYPE> Apoyar; lang pseudo-clase.

En el siguiente ejemplo ,: valor del atributo lang tipo de clase de q no hay definiciones de elementos citas:

Ejemplos

<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Trate »


Ejemplos

más ejemplos

Añadir a diferentes estilos de hipervínculos
Este ejemplo muestra cómo agregar otros estilos de hipervínculos.

Uso: enfoque
Este ejemplo muestra cómo utilizar el: centrarse pseudo-clase.


Todo CSS pseudo-clases / elementos

selector ejemplo El ejemplo muestra
: activada input:checked Todo elemento de formulario seleccionado
: desactivado input:disabled Seleccionar todos los elementos de formulario con discapacidad
: vacío p:empty Seleccionar todos los elementos p no tienen hijos
: habilitado input:enabled Seleccionar todos los elementos de formulario habilitadas
: La primera de tipo p:first-of-type Seleccione cada elemento padre es los primeros elementos p p elemento hijo
: En rango input:in-range Seleccionar los valores de los elementos dentro de un rango especificado
: inválido input:invalid Seleccionar todos los elementos no válidos
: Last-child p:last-child Seleccionar todos los elementos p en el último elemento secundario
: El último de los de tipo p:last-of-type Seleccione cada elemento p es el último elemento de un elemento padre p
: No (selector) :not(p) Seleccionar todos los elementos que no sean el p
: Nth-child (n) p:nth-child(2) Seleccionar todos los elementos p en el segundo sub-elemento
: Nth-last-child (n ) p:nth-last-child(2) Seleccionar todos los elementos de la inversa de p segundo elemento hijo
: Nth-última-de-tipo (n) p:nth-last-of-type(2) Seleccionar todos los elementos p es la inversa de la segunda sub-elemento p
: Nth-de-tipo (n ) p:nth-of-type(2) Seleccionar todos los elementos p en el segundo sub-elemento para el p
: Only-de-tipo p:only-of-type Seleccione sólo un elemento hijo de p elementos
: Un solo hijo p:only-child Seleccione sólo un elemento hijo de p elementos
: opcional input:optional Optar por no atributo "necesaria" del elemento
: Fuera de rango input:out-of-range Seleccionar elemento de atributo fuera del rango especificado de valores
: Sólo lectura input:read-only Seleccione el atributo de sólo lectura de los atributos de los elementos
: Lectura y escritura input:read-write Elegir no sólo lectura atributo de las propiedades de los elementos
: requerida input:required Seleccione la opción "requerida" atributo especifica las propiedades de los elementos
: root root Seleccione el elemento raíz del documento
: diana #news:target Seleccionar elemento de la actividad actual #news (haga clic en una dirección URL que contiene el nombre del anclaje)
: válido input:valid Seleccione todos los valores válidos para las propiedades
: enlace a:link Seleccionar todos los enlaces no visitados
: visited a:visited Seleccionar todos los enlaces visitados
: activa a:active Select es un enlace activo
: hover a:hover Ponga el ratón sobre el estado del enlace
: enfoque input:focus Después de seleccionar el elemento de entrada tiene enfoque
: First-letter p:first-letter Seleccione la primera letra de cada elemento <p>
: First-line p:first-line Seleccione la primera línea de cada elemento <p>
: First-child p:first-child <] P> selector de elementos coincide con cualquier elemento que pertenece al primer elemento secundario
: antes p:before Insertar contenido antes de cada elemento <p>
: después de p:after Insertar contenido después de cada elemento <P>
: Lang (idioma) p:lang(it) selección de atributos lang <p> elemento a un valor de inicio