Pseudo Clases y Pseudo Elementos en CSS
Contenido del curso
Juan Esteban Galvis
Luis Alejandro Rojas Bustos
Efraín Hernández García
María José Ledesma
Jesus Eduardo Sanchez Baños
Camila Andrea Díaz Serrano
Anthony Ismael Manotoa Moreno
Jesus Velasco
Eber Eliud Rodriguez Alvarado
Fabricio Joel Miranda Quezada
mandy .
Brian Alejandro Flores Carmona
John Cardenas
Joel Dominguez Merino
Sebastian Camilo Herrera Lopez
Jose Daniel Huerta Vazquez
Fabio Gomez
RICARDO JAVIER TORRES MÁRQUEZ
Héctor Alonso Padilla Ramírez
Andres Condezo Monge
Jimmy Buriticá Londoño
Jeferson Stiven Parra Mahecha
Claudia Carolina Llamoca Pastor
Alejandra Valentina Acosta Cuéllar
Yajayra Arauco Flores
Yeisson Stik Gutierrez Rivera
Aarón González
Yeisson Stik Gutierrez Rivera
Cesar Gabriel Mejias Farreras
José Francisco Salazar García
Antony Mateu
Pablo Perez
Daniel Rojas Artiaga
Yair Lira
Sebastian Pedroza
Rodolfo Sebastian Herrera Hernández
Ali Hilario
Ricardo Andres Zambrano Cuaicuan
Fabio Madrid
Scarlette Samanta Tinajero Paez
Emerson David Cabrera Salas
Danilo Valenzuela
Luis Carranza Jasso
Davis Bremdow Salazar Roa
Diego Alejandro Moreno Pedroza
Julian David Orozco Colorado
Luis Ernesto Almeida Zambrano
Juliana Vega
Edgar Benjamin Tzul Tacam
Omar Gabriel Aguilar Moscoso
Javier Tecún
Resume de BEM:
Es nombrar clases siguiendo el siguiente patrón: BLOQUE__ELEMENTO--MODIFICADOR
Por ejemplo:
<!-- BLOQUE --> <main class="Padre"> <!-- BLOQUE__ELEMENTO --> <section class="Padre__Hijo"> <!-- BLOQUE__ELEMENTO--MODIFICADOR --> <article class="Padre__Hijo--Mayor"></article> </section> <section class="Padre__Hijo"></section> <section class="Padre__Hijo"></section> <section class="Padre__Hijo"></section> </main>
Muchas gracias por el aporte.
Resumiste todo perfecto!
Tus apuntes son increíbles!🦄
Que buen aportee!! :D
Cómo nombrar las clases
Metodología BEM: cómo nombrar correctamente las clases.
Solo usa clases. Las nombra siguiendo el siguiente patrón: BLOQUE__ELEMENTO—MODIFICADOR (son 2 guiones, se usa 1 guión para separar palabras).
<!-- BLOQUE --> <main class="Padre"> <!-- BLOQUE__ELEMENTO --> <section class="Padre__Hijo"> <!-- BLOQUE__ELEMENTO--MODIFICADOR --> <article class="Padre__Hijastro--Mayor"></article> <article class="Padre__Hijastro--Menor"></article> </section> </main>
Crear estilos a etiquetas dentro de clases
Si tienes etiquetas dentro de la etiqueta a la que le estás aplicando estilos y le pones una clase, puedes aplicar estilos únicamente a las etiquetas dentro de esa clase de la siguiente manera: .clase etiqueta {}
/* Estilos a etiqueta "a" dentro de una clase */ .main-nav__item a { color: white; }
Usa
background-colorpara ver las cajas de los elementos.
Pseudo clases
Define el estilo de un estado especial de un elemento.
Agregar al final de la clase :nombreAccion
/* Pseudo clase */ .main-nav__item a:hover { color: darkblue; } .main-nav__item a:active { color: darkcyan; }
Lista de Pseudo Clases
Pseudo Elementos
Define el estilo de una parte específica de un elemento.
Agregar al final de la clase ::nombreAccion
/* Pseudo elemento */ .main-nav__item a::after { content: " | "; /* despues del elemento, agrega esto */ }
Lista de Pseudo Elementos
Tremendo aporte jejejeje. Lo voy a guardar en mi notion UWU. por cierto y aprovechando que eres del team platzi!, seria genial que podamos guardar los comentarios en una lista a la cual podamos acceder siempre!. y así evitarnos el guardar los posts en otros lugares, Agilizaría mucho nuestro flujo de estuido uwu.
muy buen resumen ahora me queda claro la pseudo calse y los pseaudo elementos
Talvez sea muy básico pero me gusto
de dónde sacaste los iconos? con qué programa los dibujaste tú?
Las pseudo-clases especifica un estado especial a un elemento seleccionado.
/* Ejemplo */ p:first-child { color:red; } /*Convierte todo el texto del primero hijo del bloque de código en rojo. Todo el texto */
Lista de pseudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial, sino que permiten añadir estilos a una parte concreta (a veces muy específica) de un elemento.
/* Ejemplo */ p::first-letter { color: red; font-size: 20px; } /* Toma solo la primera letra de un elemento, no todo su contenido. Solo la primera letra.*/
Lista de pseudo-elementos: https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos . ¿La diferencia? Básicamente los pseudo-elementos por lo general hacen referencia a partes específicas de un elemento, mientras que las pseudo-clases hacen referencia al estado del elemento.
No conocía los Pseudoelementos y me quede sorprendido! Habra forma de combinar los 2? Por ejemplo me imagino lo siguiente: En 1 botón al tener el mouse sobre el (:hover) que cambie el color de la primera letra a color rojo (::first-letter) Gracias por tu aporte!
Muchas gracias por tu aporte, muy bien estructurado.
Es importante tomar en cuenta que cuando se va a utilizar la metodología BEM no se "debería" utilizar etiquetas, BEM es para trabajar únicamente con clases y separar completamente el HTML del CSS para que puda ser reutilizado. Cuando el profesor colocó** .main-nav__item a{ }** Realmente no aplicó BEM, con BEM la etiqueta a debería haber tenido su propia clase (EN BEM TODOS LOS ELEMENTOS DEBEN CONTAR CON CLASE, PREFERENTEMENTE)
Gracias por el aporte!
En ese caso, para que fuese acorde a la metodologia, a la etiqueta a ¿le colocariamos una clase tambien?, de manera que al momento de llamarlo en CSS lo hicieramos a través de la clase directamente. ¿es correcto?
Gracias!
Muy buen resumen
Les comparto un gran recurso sobre BEM
Está genial!! gracias! Me gusta mucho también el diseño de la página :D!
Excelente documentación compañero.
Muy preciso :muscle: ¿Qué te ha parecido el curso hasta ahora?
Genial, la verdad aprendí bastante,
PARA ESCRIBIR EN VARIAS LINEAS AL MISMO TIEMPO.
En el minuto 5:10 podemos ver que hace un copia y pega para colocar las clases en cada una de las <li> entonces para obtener una forma mas rápida de trabajo: pueden (antes de escribir la clase) hacer clic con la rueda de desplazamiento del mouse y hacer scroll hasta donde desees (en este caso, al ultimo <li>) de esa forma podrán escribir en las 4 líneas de código al mismo tiempo.
Excelentisimo aporte Cesar, muchas gracias👍
Hola! estoy teniendo un problema con este profesor, no es la primera vez que me doy cuenta de como utilizar lo que dicta en la clase ( en este caso pseudo clases y pseudo elementos) y aplicarlo pero no logro entender que es cada cosa. Por ejemplo tengo hecho un formulario haciendo uso de pseudo clases hasta ahí todo excelente pero quiero hacer apuntes en mi cuaderno y no logro encontrar en esta clase la explicación exacta de que es una pseudo clase y que es un pseudo elemento. Hace casi un mes estoy con este curso por la misma razón, me pierdo y tengo que empezar TODO EL CURSO DE NUEVO es como que el profesor dice: Hoy vamos a dar pseudo clases y pseudo elementos, empieza a hacer código y listo ya tienes que es una pseudo clase y pseudo elemento. Como que tengo que andar adivinando para que sirve cada cosa o andar buscando en otros portales. Realmente me desmotiva :(
No te preocupes, a mucha gente le pasa los mismo en este y otros cursos, en mi caso yo comence la escuela de js, y ya en el curso de frontend prácticamente copiabas los que la profesora hacia y solo te mareaba aun mas, yo hice una pregunta similar a la tuya y me recomendaron este curso antes del otro, el problema es que son todos iguales van muy rapido y muchas veces pierden el hilo de las clases, y terminas investigando por fuera ya sea en youtube o google, yo ya estoy a punto de suspender platzi, no es la primera vez que me pasa eso con un curso y es frustrante mas que ayudar lo que hacen es generar frustracion en la persona, no te rindas, te recomiendo que investigues por tu cuenta, en youtube o google o incluso otra academia online.
te puedo decir que te relajes, busca en otros lugares Tambien es muy recomendado, y hay cosas que como profesional ya tienes el vicio o lo conoces muy bien por eso obvias la información, busca comunidades que te ayuden a entender las cosas que preguntas, o pregunta en los comentarios sobre lo que tengas dudas,
yo termine un curso de45 horas de paginas web y te juro que esta mejor explicado aquí en 7 horas.
aparte no comprenderás todo en u totalidad en solo 7 horas son conocimientos que se necesitan practicar, y poder interiorizar para poder dominar, solo continua practicando y lo lograras :)
A veces me gustaria que fuera más clara la clase como el siguiente video: https://youtu.be/LUjsToWH8s4
Puede en ocaciones pasar eso, pero recuerda que en esta comunidad estamos para ayudarnos y siempre habrá alguien dispuesto a complementar la clase 😁👍
/* Usamos las clases */ .main-nav{ margin-top:10px; /* Espaciado exterior superior */ list-style: none; /* Le quitamos los estilos a la lista */ padding-left:10px; /* Espaciado interno izquierdo */ background-color: #13a4a4; /* Color de fondo para el elemento */ } .main-nav_item{ display: inline-block; /* Hacemos que pasen de vertical a horizontal */ } .main-nav_item a{ /* Modificamos todos las etiquetas <a> que esten dentro de la clase especificada */ color: #FFFFFF; /* Cambiamos el color de la letra a blanco */ padding: 5px; /* Hacemos un espaciado interior general(superior, inferior, derecho y izquierdo) de 5 pixeles */ border-radius: 2px; /* Hacemos un borde redondeando de 2 pixeles al elemento */ text-decoration: none; /* Le quitamos las decoraciones al texto de la etiqueta <a> */ } .main-nav_item a:hover{ /* Con etiqueta:hover hacemos que cada vez que el usuario pase el cursor por el elemento se le apliquen los siguientes estilos CSS */ color: #0000FF; /* Hacemos que el color de la fuente sea de color azul */ } .main-nav_item a:active{ /* Con etiqueta:active hacemos que cada vez que el usuario haga click sobre el elemento se le apliquen los siguientes estilos CSS */ color: #FF0000; /* Hacemps que el color de la fuente sea de color azul */ } /* Pseudo clases y Pseudo elementos */ .main-nav_item a::after{ /* Con after agregamos cierto contenido despues de la etiqueta especificada */ content : " | "; /* con content : "contenido" agregamos el contenido que queremos mostrar */ }```
Excellent summary!
Buen aporte
No se ustedes, pero este curso me parece demasiado superficial. No hemos terminado ni ver HTML y ya incluyen CSS. (Extrañamos a Fredy de profesor!, este man no deja ni apuntes.)
Les recomiendo estudiar por su parte HTML y CSS y luego volver a pasar por aqui, yo lo hice en w3 school. Les dejo el link!
No creo que introducir CSS en esta etapa haya sido el problema (en realidad, muchos cursos básicos de HTML y CSS me desesperaban un poco por introducir demasiado tarde CSS para mí gusto nwnU), sino que asume que ya sabes algunas cosas cuando la misma descripción del curso te dice que aprendes desde cero, y no hablo precisamente de lo que se supone que ves en el prework. Por ejemplo, mencionó muy por encima lo que es comentar un código tanto en CSS como en HTML; yo sabía lo que era comentar un código, pero me extrañó que no lo comentara a detalle y fuera más un momento "blink-and-miss" para algo tan importante, para lo que de hecho bien podría haberse hecho un video completo de 2:00 minutos explicando porqué es tan importante comentar el código (y diferenciarlo de CSS y HTML).
En sí, no creo que sea un mal profe, pero aunque definitivamente no dudo de sus conocimientos creo que su nivel de experticia le hace olvidar cómo alguien que a penas va a aprendiendo le hace falta que le expliquen hasta las cosas más básicas. Esto es particularmente más notorio cuando dice "haz esto y luego te lo explico". Confunde mucho, sobre todo para alguien sin bases que podría encontrarlo algo intimidante. No dudo de que sea un excelente profesional, pero definitivamente como profesor le falta aún mucho por delante.
Saludos!
Puede ser que hay una mala planeación del curso, al ir en desorde, un tema acá, otro por allá, queda todo como segmentado. Platzi debería mejorar. A la gente que viene de cero le puede costar ucho entender.
Se debería explicar primero el modelo de caja
Completamente de acuerdo. En general todo este curso está explicado incompleto en desorden y por grageas.
Pseudo clases & Pseudo elementos
¿Qué son? 🤔
Dentro del css, se podrían categorizar como selectores, nos permiten:
:visited).Pseudo Elementos ::
Los Pseudo-elementos se utilizan para seleccionar una parte de alguna estructura HTML, por ejemplo:
p::first-letter Selecciona la primera letra de un párrafo (No solamente de un párrafo.elemento:beforeCrear un elementos antes del contenido del elementohtml con afterse crear después del contenido.Pseudo Clases :
Las Pseudo-clases se utilizan para seleccionar un elemento en un determinado estado, por ejemplo:
:active Estado que se activa cuando el puntero del mouse pasa por encima del elemento.:focus pseudo-clase activada cuando un campo de formulario o elemento html tiene el foco del mouse (esta seleccionado o se este escribiendo en dicho elemento)Lista de Pseudo - clases - elementos 😉
Pseudo Elementos ::
Pseudo Clases :
Gran resumen, gracias
un video explicativo sobre la metodologia BEM https://www.youtube.com/watch?v=bvnzyXGkNY4
Muchas gracias <3
Estuvo excelente, gracias!
Estas clases hacen honor al titulo del curso "Curso Definitivo de HTML y CSS".
de acuerdo
encontré este artículo sobre la metodología BEM por si les sirve! https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa/