BelloMuñozEdgarAlejandroTarea9 - Edgar Bello

Vista previa del material en texto

Bello Muñoz Edgar Alejandro 
Pseudoclases y pseudoelementos 
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 pseudoclases y los pseudoelementos permiten hacer referencia a determinados 
elementos sin basarse en la información contenida en el árbol del documento. 
La diferencia entre pseudoclases y pseudoelementos es sutil. En general, los 
pseudoelementos suelen hacer referencia a determinadas partes de un elemento, 
mientras que las pseudoclases suelen hacer referencia al estado del elemento. 
Otra diferencia importante es que un pseudoelemento sólo puede aparecer al final 
de un selector, mientras que una pseudoclase puede aparecer en cualquier 
elemento del selector. 
Pseudoclases 
Una pseudoclase es un selector que marca los elementos que están en un estado 
específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por 
los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado 
una clase en una parte determinada del documento y, a menudo, ayudan a reducir 
el exceso de clases y proporcionan un marcado más flexible y fácil de mantener. De 
manera general, su sintaxis es: 
selector:pseudoclase { propiedad: valor; } 
 
Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se 
deseen en un selector. 
Pseudoelementos 
Los selectores de CSS, las pseudoclases y todos los elementos HTML no son 
suficientes para poder aplicar estilos a algunos elementos especiales. Si se desea 
por ejemplo cambiar el estilo de la primera línea de texto de un elemento o modificar 
la primera letra de un texto, no es posible hacerlo con las utilidades anteriores. 
La única forma de poder seleccionar estos elementos especiales es mediante los 
pseudoelementos definidos por CSS para este propósito. 
La sintaxis para manejar pseudolementos es la siguiente: 
selector::pseudo-elemento { propiedad: valor; } 
De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto 
forma parte de CSS3 y de un intento para distinguir pseudoelementos de 
pseudoclases. 
Bello Muñoz Edgar Alejandro 
El pseudoelemento :first-line permite seleccionar la primera línea de texto de 
un elemento. Este pseudoelemento sólo se puede utilizar con los elementos de 
bloque y las celdas de datos de las tablas. 
El pseudoelemento :first-letter permite seleccionar la primera letra de la 
primera línea de texto de un elemento 
Los signos de puntuación y los caracteres como las comillas que se encuentran 
antes y después de la primera letra también se ven afectados por este 
pseudoelemento. Este pseudoelemento sólo se puede utilizar con los elementos de 
bloque y las celdas de datos de las tablas. 
Los pseudoelementos :before y :after se utilizan en combinación con la 
propiedad content de CSS para añadir contenidos antes o después del contenido 
original de un elemento. El contenido insertado mediante los pseudoelementos 
:before y :after se tiene en cuenta en los otros pseudoelementos :first-line y 
:first-letter. 
Selectores de atributo 
Los selectores de atributos permiten elegir elementos HTML en función de sus 
atributos y/o valores de esos atributos. 
Los tipos de selectores de atributos son los siguientes: 
• [nombre_atributo]. Selecciona los elementos que tienen establecido el 
atributo llamado nombre_atributo independientemente de su valor. 
• [nombre_atributo=valor]. Selecciona los elementos que tienen establecido 
un atributo llamado nombre_atributo con un valor igual a valor. 
• [nombre_atributo~=valor]. Selecciona los elementos que tienen 
establecido un atributo llamado nombre_atributo y al menos uno de los 
valores del atributo es valor. 
• [nombre_atributo|=valor]. Selecciona los elementos que tienen establecido 
un atributo llamado nombre_atributo, cuyo valor es una lista de valores, 
donde alguno comienza por valor 
• [nombre_atributo$=valor]. Selecciona aquellas etiquetas cuyo atributo 
acabe en ese valor. 
• [nombre_atributo^=valor]. Selecciona aquellas etiquetas cuyo atributo 
comience por ese valor. 
• [nombre_atributo\*=valor]. El atributo nombre_atributo existe y contiene 
valor.