Scribd
Cargar
47 vistas7 páginas

Pseudo

Las pseudoclases CSS permiten aplicar estilos a elementos en estados especiales como :hover al pasar el ratón por encima, :visited para enlaces visitados, o :active para elementos activos. También permiten seleccionar el primer elemento de un tipo o elementos en diferentes idiomas. Los pseudoelementos como ::before y ::after añaden contenido generado a los elementos.

Cargado por

Rigoberto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
47 vistas7 páginas

Pseudo

Las pseudoclases CSS permiten aplicar estilos a elementos en estados especiales como :hover al pasar el ratón por encima, :visited para enlaces visitados, o :active para elementos activos. También permiten seleccionar el primer elemento de un tipo o elementos en diferentes idiomas. Los pseudoelementos como ::before y ::after añaden contenido generado a los elementos.

Cargado por

Rigoberto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Pseudo-classes

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que
especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará

un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

Div:hover {
Background-color: #F89B4D;
}

Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un


elemento no sólo en relación con el contenido del árbol de documento, sino también

en relación a factores externos como el historial del navegador (:visited, por ejemplo),
el estado de su contenido (como :checked en algunos elementos de formulario), o la

posición del ratón (como :hover que permite saber si el ratón está encima de un


elemento o no).

Nota: En lugar de usar pseudoclases, pseudo-elements puede usarse para dar estilo a


una parte específica de un elemento.

Sintaxis

Selector:pseudoclase { propiedad: valor; }

Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un
selector.
Las hojas de estilo asocian características de estilo a los elementos basándose en
las etiquetas de los elementos y en su posición relativa (en el árbol del documento).
Las pseudo-clases y los pseudo-elementos permiten hacer referencia a
determinados elementos sin basarse en la información contenida en el árbol del
documento.

La diferencia entre pseudo-clases y pseudo-elementos es sutil. En general, los


pseudo-elementos suelen hacer referencia a determinadas partes de un elemento,
mientras que las pseudo-clases suelen hacer referencia al estado del elemento.

Otra diferencia importante es que un pseudo-elemento sólo puede aparecer al final


de un selector, mientras que una pseudo-clase puede aparecer en cualquier
elemento del selector.

En CSS 2, la sintaxis de las pseudo-clases y los pseudo-elementos era la misma,


etiqueta:pseudo-elemento-o-pseudo-clase (es decir, el nombre de la etiqueta seguido
de dos puntos y del nombre del pseudo-elemento o de la pseudo-clase). En 2011, en
la recomendación CSS 3 Selectores (cuya segunda versión CSS 3 Selectores se
publicó en 2018), se modificó la notación de los pseudo-elementos a
etiqueta::pseudo-elemento (es decir, el nombre de la etiqueta seguido dos veces de
dos puntos y del nombre del pseudo-elemento) para distinguir unos de otros, pero
permitiendo utilizar también la antigua notación.

La pseudo-clase :first-child hace referencia al primer elemento de un tipo contenido


dentro de otro. El ejemplo siguiente muestra cómo identificar al primer párrafo dentro
de una división sin necesidad de asignar ninguna clase al párrafo.

Div {
Border: black 5px solid;
Margin: 10px;
Padding: 10px;
}

Div p:first-child {
Color: red;
}
Es necesario que el tipo del primer elemento hijo en la página web sea el indicado
en la hoja de estilo. En el ejemplo siguiente, el primer elemento dentro de la división
no es un <p>, sino un <pre>, así que no se le aplica el estilo indicado en la hoja de
estilo.

Las pseudo-clases de enlace :link y :visited

:link

:visited

La pseudo clase :link (o a:link) permite especificar el aspecto de los enlaces que


todavía no han sido visitados.

La pseudo clase :visited (o a:visited) permite especificar el aspecto de los enlaces


que sí han sido visitados.
La pseudo-clase :link establece el aspecto de los enlaces no visitados, pero si sólo
se incluye en la hoja de estilo la pseudo-clase :link, el aspecto no cambiará al hacer
clic en los enlaces:

En la recomendación CSS 2 se podía utilizar la pseudo clase :visited para


modificar cualquier propiedad, pero como una página web maliciosa podía utilizar
esta propiedad para saber las páginas que el usuario había visitado, los navegadores
han reducido el número de propiedades que se pueden aplicar con esta propiedad.
La recomendación CSS 2.1 alerta de ese peligro y permite que los navegadores no
permitan modificar ninguna propiedad o sólo admitan algunas propiedades.

Teóricamente, las propiedades que podrían modificarse sin riesgo son las
relacionadas con colores. El siguiente ejemplo prueba esas cuatro propiedades. En
el ejemplo se establecen antes las propiedades en la etiqueta <a> porque si no
Firefox y Chrome no la modifican.

Las pseudo-clases dinámicas :hover, :active y :focus

La pseudo-clase dinámica :hover

:hover

La pseudo-clase :hover permite especificar el aspecto del elemento sobre el que se


encuentra el ratón.
La pseudo-clase dinámica :active

:active

La pseudo-clase :active permite especificar el aspecto de un elemento cuando se


hace clic sobre él (y mientras se mantiene el botón del ratón apretado).

La pseudo-clase dinámica :focus

:focus

La pseudo-clase :focus permite especificar el aspecto de un elemento cuando este


tiene el foco. Los elementos que admiten el foco en una página web son aquellos
que reaccionan a entrada por teclado (por ejemplo, los elementos de los formularios
o los enlaces). En el ejemplo siguiente, al hacer clic en un campo de texto (o cambiar
de campo con el tabulador), el campo seleccionado se resalta con un borde rojo.

La pseudo-clase de idioma :lang()

:lang

La pseudo-clase de idioma :lang() permite especificar el aspecto de los elementos de


un idioma determinado. En el ejemplo siguiente se cambia las comillas utilizadas en
una cita <q> según el idioma indicado en el atributo lang.
Contenido generado: content

::before

   

::after

   

Content

Los pseudo-elementos ::before y ::after permiten añadir contenido a un elemento


desde la hoja de estilo, al principio o al final del elemento.

El contenido generado no puede seleccionarse con el ratón (para copiarlo y pegarlo


en otro documento, por ejemplo).

El contenido generado mediante la propiedad content puede incluir texto:

Generar contadores: counter, counter-increment y counter-reset

Counter

Counter-increment

Counter-reset

 
Se pueden generar contadores en los pseudo-elementos ::after y ::before mediante
la propiedad content y el valor counter(nombre_de_contador). El contador debe
ponerse a cero con la propiedad counter-reset y aumentarse con la
propiedad counter-increment.

En los ejemplos siguientes se ha definido un contador que se llama cuenta-parrafos.


Este contador se genera al principio de cada párrafo, se pone a cero con el
elemento <pre> y se incrementa en cada párrafo.

También podría gustarte