Bienvenidos de vuelta a todos. Hoy vamos a hablar muy brevemente sobre pseudoclases y elementos. Así que hemos estado trabajando con diferentes tipos de elementos a lo largo de todo este curso, y cómo podemos estructurarlos y darles estilo. Bueno, los pseudo elementos son un poco diferentes de las otras cosas que hemos visto antes en que son muy dependientes de la estructura DOM, y algunos de ellos están realmente poblados dinámicamente. Así que, para ser honesto, usted ha visto esto antes de volver cuando hablamos de estilos de enlaces porque los enlaces tenían esos diferentes estados. Un ejemplo que usamos fue la idea de flotar. Si coloca el cursor sobre un enlace, puede cambiar el estilo para eliminar tal vez el subrayado o cambiar el color. Por lo tanto, hablemos de algunos de estos diferentes tipos de pseudo-clases más allá de lo que puedes hacer con solo un enlace. Empecé con la que hemos visto antes. Usted puede tener un enlace y también un enlace que ha sido visitado. También puede reaccionar ante diferentes acciones del usuario. Por lo tanto, si alguien está pasando el cursor sobre un párrafo o pasando el cursor sobre una etiqueta H1, todavía puede reaccionar ante él. No sólo tiene que ser un enlace. También puede tener activo, y activo es cuando mantiene presionado el botón del ratón sobre algún tipo de elemento. Y el último es el enfoque. El enfoque sería cuando alguien está tabulando a través de la página, usted puede poner el foco en cada uno de estos. Finalmente, uno que tiene mucho sentido y probablemente haya visto antes es que puede marcar las pseudo-clases de formularios o interfaces. Si se ha hecho clic o desactivado la casilla de verificación, puede ver que a veces la hacen amarilla. O si alguna vez has estado en un sitio y no tienes permiso para escribir algo hasta que escribas algo en un cuadro de arriba, más arriba, tienden a atenuarlo. Así que la forma en que seguirías adelante y harías esto es que podrías decir, ¿sabes qué? Si alguien pasa el cursor sobre mi párrafo, quiero simplemente hacer un borde. Borde: 1 px. Ahora, aunque no hay lugar en el DOM donde tengan p: hover, debería funcionar para usted cuando ponga esa regla de estilo. Por lo tanto, también puede crear un estilo basado en la posición estructural de los diferentes elementos. Tienes el primer hijo, el último hijo, el nth-child. La forma en que uno trabaja es poner un número para decir el quinto hijo o el décimo hijo. Sólo puedes tener un hijo. También tiene otras cosas diferentes, como primero de tipo, último de tipo, solo de tipo. Y de nuevo, solo tienes el elemento, los dos puntos y luego el nombre de la pseudo-clase que quieres aplicar estilo. Los pseudoelementos no son necesariamente parte del DOM, pero se pueden usar para diseñar partes específicas o únicas de la página. Por lo tanto, algunos ejemplos podrían si tiene un párrafo y desea poner esa primera letra elegante con una fuente diferente, puede usar el pseudo elemento de la primera letra. Igual que con la primera línea, puede generar cosas para que aparezcan antes o después de los elementos. Muchas veces si estás diseñando algo así como la información de la tarjeta de crédito, puedes seguir adelante y poner los diferentes tipos de tarjetas de crédito pero tener un poco antes de que diga, y oye, pon una foto aquí. También puede diseñar solo fragmentos de diferentes selecciones. Ahora no te di mucho código cuando pasamos por aquí porque realmente usar pseudo clases y pseudo elementos es muy único en la página que vas a crear. Así que más tarde, cuando hablemos de tablas, vigile porque voy a usar muchas pseudo clases y pseudo elementos allí. Es muy importante darse cuenta de que no voy a ser capaz de cubrir cada combinación de todo lo que aprendemos. Pero quiero darte las herramientas para que puedas salir e investigar cómo puedes agregar nuevos estilos geniales a tu página. Buena suerte.