Selectores por pseudocodigo

Css

Selectores por pseudocodigo

Puedo hacer un link a y cambiar de color cuando

a:link Cambio de color el link

a:visited: cuando ya acido clickeado me cambia de color

a:hover cuando paso sobre el link me cambia de color

Primer hijo

Otro selector de pseudo-clase útil es first-child. Se usa para aplicar el estilo únicamente a los elementos que son los primeros hijos de sus padres. Por ejemplo:

p:first-child {

color: red;

}

Hará que todos los párrafos que sean los primeros hijos de sus padres tengan color rojo.

Instrucciones

En la pestaña CSS, establece la propiedad font-family del primer párrafo como cursive.

Nth child

¡Bien hecho! En realidad puedes seleccionar cualquier hijo de un elemento después del primer hijo con el selector de pseudo-clase nth-child; simplemente agregas el número del hijo entre paréntesis después del selector de pseudo-clase. Por ejemplo,

p:nth-child(2) {

color: red;

}

Les dará a todos los párrafos que sean los segundos hijos de su elemento padre el color rojo.

El elemento que es el hijo va antes de:nth-child; su elemento padre es el elemento que lo contiene.

Instrucciones

En la pestaña CSS:

1. Establece la propiedad font-family del segundo párrafo como Tahoma.

2. Establece el color del tercer párrafo como #CC0000.

3. Establece el color de fondo del cuarto párrafo como #00FF00.

4. Establece la propiedad font-size del quinto párrafo como 22px.

¿Recuerdas cómo enfocarte en los selectores que están anidados dentro de otros? Si tienes un párrafo dentro de una div que está dentro de otra div, puedes alcanzarlo de esta forma:

div div p {

/*Código de CSS*/

}

Esto le dará estilo a todos los párrafos anidados dentro de dos div y dejará intactos todos los párrafos que no cumplen con esos criterios.

Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen font-size y height no funcionarán correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista.

Instrucciones

Haz que los párrafos dentro de las etiquetas de ítems de lista tengan un tamaño de fuente de 30px.

Dale estilo a esos div!

¡Qué bien! Ahora vamos a darles a nuestros div una apariencia básica. (En un momento usaremos las clases para cambiar la apariencia de nuestros div, dependiendo de si una persona determinada es un amigo, miembro de la familia, o un vil enemigo.)

Hemos iniciado el selector div para ti, con un poco de magia de posicionamiento (display: inline-block y margin-left: 5px). ¡Te explicaremos sobre ellos en la siguiente lección!

Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen height y width no funcionarán correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista.

Instrucciones

Mientras tanto, dale un cambio de look a tus div en la pestaña CSS:

1. Haz que tengan ancho y alto de 100 píxeles.

2. Establece su propiedad border-radius como 100%. (Antes de que mires, ¿puedes adivinar lo que esto hará?)

3. Haz que tengan un borde de dos píxeles de ancho, de línea sólida y de color negro.

Utiliza los comandos border: 2px solid black;

margin-left: 5px;

margin-top: 5px;

text-align: center;

Ocupando espacio

Genial, ¿verdad? Cada elemento de HTML tiene su propia caja para habitar.

Como viste, la caja más externa de cada elemento ocupaba el ancho de toda la página. Es por esto que, hasta ahora, tus elementos de HTML habían estado uno encima del otro: ocupan el ancho completo de la página de forma predeterminada.

Podemos cambiar todo esto con la primera propiedad de posicionamiento que aprenderemos: la propiedaddisplay. Aprenderemos sobre cuatro valores posibles.

block: esto vuelve al elemento una caja de bloque. ¡No permitirá que nada sea ubicado junto a él en la página! Ocupa el ancho completo.

inline-block: Esto vuelve a un elemento una caja de bloque, pero permitirá que otros elementos sean ubicados junto a él en la misma línea.

inline: Esto hace que un elemento sea ubicado en la misma línea que otro elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que requiera (pero no la línea completa).

none: ¡Esto hace que el elemento y su contenido desaparezcan por completo de la página!

Instrucciones

Pongámonos manos a la obra. Establece la propiedad display de todas las <div> como block.

Inline-block

¡Bien hecho! Si no notaste mucho la diferencia,

...