Etiqueta de nivel 1

Mi texto principal entre etiquetas p...

Etiqueta de nivel 2

Otra etiqueta de nivel 2

<h1>Etiqueta de nivel 1</h1> 
	<p>Mi texto principal entre etiquetas p...</p>
	<h2>Etiqueta de nivel 2</h2>
	<h2>Otra etiqueta de nivel 2</h2>
				

h1~h2 {font-style: italic};				
				

Vamos a aplicar estilos a distintos tipos de enlaces utilizando los selectores de atributos:

• Contacto
• Enlace de descarga a archivo pdf
• Cita importante

	a { 
	   text-decoration: none; 
	} 
	a[hrefˆ="mailto"] { 
		color: red;
		font-weight: bold;
	}
	a[href$=".pdf"] { 
		font-style: italic;
		color: blue;						
	}
	li[class*="importante"] {
		color: purple;
	}
				

Introducción | Resultados | Conclusión

Introducción

Lorem ipsum dolor sit amet...

Resultados

Morbi ut dolor interdum odio mollis dapibus...

Conclusión

Integer semper eget mauris gravida congue...

	a { 
		text-decoration: none; 
	} 

	a:target { 
		background-color: gold; 
	}
	
	p > a{
		color: blue;
	}		

Vamos a mostrar varios ejemplos del comportamiento de las pseudo-clases con los elementos descendientes:

La pseudo-clase :nth-child(x) permite seleccionar el enésimo elemento hijo de un elemento padre. Ese número x es el argumento de los paréntesis.

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(2){ 
		background-color:gold; 
	}		
			

El argumento x puede ser una palabra clave: :nth-child(odd) para seleccionar los hijos impares y :nth-child(even) para seleccionar los hijos pares.

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(odd){ 
		background-color: gold; 
	}		
			

El argumento x puede ser un cálculo matemático de tipo: an+b. n para representar un valor que comience con 0 y que se incremente con valores distintos de 1. El valor de n puede ser negativo o positivo.

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(n+3){ 
		background-color: gold; 
	}		
			

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(-n+3){ 
		background-color: gold; 
	}		
			

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(3n){ 
		background-color: gold; 
	}		
			

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:nth-child(3n+1){ 
		background-color: gold; 
	}		
			

Las nuevas pseudo-clases :first-of-type y :last-of-type permiten seleccionar el primer y el último elemento de un tipo específico.

• Uno
• Dos
• Tres
• Cuatro
• Cinco
• Seis
• Siete

	li:first-of-type, li:last-of-type { 
		background-color: gold; 
	}		
			

La pseudo-clase :nth-of-type() permite seleccionar el enésimo elemento de un tipo específico. Los argumentos posibles son los mismos que vimos con la pseudo-clase :nth-child().

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes.

	strong:nth-of-type(2) { 
		background-color: gold; 
	}
			

La pseudo-clase :only-child permite seleccionar aquellos elementos que no tengan hermanos.

	strong:only-child { 
		background-color: gold; 
	}
			

La pseudo-clase :only-of-type permite seleccionar los elementos de un tipo determinado que no tengan hermanos.

	strong:only-of-type { 
		background-color: gold; 
	}		
			

La pseudo-clase :not() nos permite seleccionar todos los demás elementos a excepción del elemento especificado.

Et exerci feugait, facilisis vulputate feugiat, hendrerit veniam vero? Ut praesent accumsan, nisl consequatvel feugiat at duis ex vel ea dignissim duis dignissim, velit qui, suscipit hendrerit vero. Dolore esse luptatum blandit eum commodo blandit feugiat dolore feugiat nisl veniam nibh veniam, et in nisl consequat ut?

	p>:not(u){ 
		background-color: gold; 
	}