Que es un pseudo elemento en css
selector descendente css
Los pseudoelementos ::before y ::after en CSS permiten insertar contenido en una página sin necesidad de que esté en el HTML. Aunque el resultado final no está realmente en el DOM, aparece en la página como si lo estuviera, y sería esencialmente así:
Nótese que el contenido sigue estando dentro del elemento al que se aplica. Los nombres parecen venir, ya sabes, antes o después del elemento, pero en realidad es antes o después del otro contenido dentro.
Todos los navegadores que soportan la sintaxis CSS3 de dos puntos (::) también soportan sólo la sintaxis (:), pero Internet Explorer (IE) 8 sólo soporta el punto simple, así que por ahora, se recomienda usar sólo el punto simple para una mejor compatibilidad con el navegador.
selectores css
El siguiente conjunto de selectores que veremos se denominan pseudo-clases y pseudo-elementos. Hay un gran número de ellos, y a menudo sirven para propósitos bastante específicos. Una vez que sepas cómo usarlos, puedes mirar la lista para ver si hay algo que funcione para la tarea que estás tratando de lograr. Una vez más, la página MDN correspondiente a cada selector es útil para explicar la compatibilidad con el navegador.
¿Qué es una pseudoclase? Una pseudoclase es un selector que selecciona los elementos que se encuentran en un estado específico, por ejemplo, son el primer elemento de su tipo, o están siendo desplazados por el puntero del ratón. Tienden a actuar como si hubieras aplicado una clase a alguna parte de tu documento, lo que a menudo te ayuda a reducir el exceso de clases en tu marcado, y te da un código más flexible y mantenible.
Ejemplo sencillo de pseudoclaseVeamos un ejemplo sencillo. Si quisiéramos hacer el primer párrafo de un artículo más grande y en negrita, podríamos añadir una clase a ese párrafo y luego añadir CSS a esa clase, como se muestra en el primer ejemplo de abajo:
css después de no mostrar
El siguiente conjunto de selectores que veremos se denominan pseudo-clases y pseudo-elementos. Hay un gran número de ellos, y a menudo sirven para propósitos bastante específicos. Una vez que sepas cómo usarlos, puedes mirar la lista para ver si hay algo que funcione para la tarea que estás tratando de lograr. Una vez más, la página MDN correspondiente a cada selector es útil para explicar la compatibilidad con el navegador.
¿Qué es una pseudoclase? Una pseudoclase es un selector que selecciona los elementos que se encuentran en un estado específico, por ejemplo, son el primer elemento de su tipo, o están siendo desplazados por el puntero del ratón. Tienden a actuar como si hubieras aplicado una clase a alguna parte de tu documento, lo que a menudo te ayuda a reducir el exceso de clases en tu marcado, y te da un código más flexible y mantenible.
Ejemplo sencillo de pseudoclaseVeamos un ejemplo sencillo. Si quisiéramos hacer el primer párrafo de un artículo más grande y en negrita, podríamos añadir una clase a ese párrafo y luego añadir CSS a esa clase, como se muestra en el primer ejemplo de abajo:
¿qué es un selector css?
Etiquetas: La diferencia entre pseudo-clases y pseudo-elementos puede ser un poco confusa hasta que te la expliquen. Básicamente una pseudo-clase es un selector que ayuda a la selección de algo que no puede ser expresado por un simple selector, por ejemplo :hover. Un pseudo-elemento, sin embargo, nos permite crear elementos que normalmente no existen en el árbol del documento, por ejemplo “::after`.
Los pseudo-elementos crean efectivamente nuevos elementos que no están especificados en el marcado del documento y pueden ser manipulados como un elemento normal. Esto introduce enormes beneficios para crear efectos interesantes con un mínimo de marcado, y también ayuda significativamente a mantener la presentación del documento fuera del HTML y en CSS, donde pertenece.
Con la introducción de CSS3, la diferencia entre las pseudo-clases y los pseudo-elementos es mucho más clara, ya que ahora el estándar es usar dos puntos dobles (::) en los pseudo-elementos, aunque deberíamos usar dos puntos simples hasta que ciertos navegadores sean eliminados (te estoy mirando a ti, IE8 e inferior). Aquí hay una lista de pseudo-elementos en CSS3: