Tipos de selectores: pseudoclases y pseudoelementos

También podemos ver a las pseudoclases como estados de algún elemento (con el mouse encima, visitado, activo, etc.) y a los pseudoelementos como elementos que escribimos desde CSS, por ejemplo, el ::after y el ::before nos puedes funcionar como divs, como su nombre lo dice, son elementos, pero no necesariamente están escritos desde el HTML 👀.
.
Gracias a las pseudoclases podemos cambiar los estilos de algún elemento cuando sucede algo, por ejemplo, cuando un botón está siendo clicado se activa el pseudoelemento active, entonces nosotros desde CSS podemos cambiar el color del botón a un color más oscuro para dar ese efecto de clicado 😄:
.

button {
    color: #1a73e8;
}

button:active {
    color: #1557ad;
}

.
Un dato curioso es que también podemos escribir colores usando código hexadecimal como en este caso 👀. Y ahora que ya sabes esto, ¡también podemos combinar pseudoelementos con pseudoclases! Por ejemplo, con el ejemplo de la profesora tenemos esto:
.

p::before {
    content: "✨";
}

.
Pero también podríamos agregarle un :hover y cambiar su contenido 👀👇:
.

p::before {
    content: "✨";
}

p:hover::before {
    content: "💅";
}

¡Les reto a probarlo! Hay muchas cosillas más increíbles que se pueden hacer con CSS 😄.

Angelly Indira Mesa Londoño

Atajo para agregar emoji tecla windows mas la tecla de punto (windows + . )

Joe Harry Mancera Monroy

Con la pseudo-clases :in-range y :ut-of-range podemos validar si un valor está dentro de un rango y estilizar dependiendo de la validación, por ejemplo:

Tenemos estos elementos, para llegar a este hacemos lo siguiente:

Creamos el label y el input. El truco está en los atributos del input min="18" max="100"

<label for="age">Intoduce tu edad y te digo si eres menor o mayor de edad</label>
<input type="number" name="age" id="age" min="18" max="100" value="14">
<p>Eres: </p>

luego, para agregar los estilos, debemos agregar el siguiente CSS, nos permite ver si el valor de este input está o no dentro del rango

    input:in-range {
      background-color: rgba(114, 245, 114, 0.25);
    }
    
    input:out-of-range {
      background-color: rgba(245, 128, 128, 0.25);
      border: 2px solid red;
    }
    
    input:in-range + p::after {
      content: 'Mayor de edad. 🚀';
    }
    
    input:out-of-range + p::after {
      content: 'Menor de edad. 🙈';
    }

Con esto le decimos al CSS que si está dentro del rango, le coloque el mensaje ‘Mayor de edad’ con ayuda de :in-range. Y para poner el estilo cuando no esté dentro del rango usamos :out-of-range. Esto complementado con el :after para colocar el mensaje de que ‘Eres menor de edad’.

Dejo la documentación y les comparto el ejemplo que hice en codepen

Pedro Alvarado Garcia

Notas de la clase

Las pseudoclases nos permite llegar a aquellas acciones que hace el usuario.

:active
:focus
:hover
:nth-child(n)

Los pseudoelementos nos permiten acceder a elementos de HTML que no son accesibles con los selectores ya vistos.

::after
::before
::first-letter
::placeholder

La pseudoclase se escribe con : y los pseudoelementos se escriben con ::

Cristhyan Pacheco

Creando un Checkbox personalizado

Hola a todos, aquí van dos pseudoclases interesantes y que tal vez necesiten en un futuro.

:checked

Funciona solo para <input> de tipo radio y checkbox.
Sirve para seleccionar el <input> que hayamos marcado.
Personalmente lo encuentro muy útil para manejar pestañas sin necesidad de usar JavaScript.

Parte de los estilos son:

.tab input:checked ~ .tab__title {
  background: white;
  border-bottom: 2px solid rgb(0, 174, 255);
  color: rgb(0, 75, 110);
  opacity: 1;
}
.tab input:checked ~ .tab__content {
  display: flex;
}

Bien,
Dentro de este selector: input:checked ~ .tab__title {} estamos diciendo que cuando el <input> sea marcado o seleccionado por el usuario el título tenga un fondo blanco y un borde inferior.
En el siguiente selector lo mas interesante: input:checked ~ .tab__content {} previamente hemos declarado la propiedad display: none para todos los contenidos y al declarar display: flex cuando marcamos un <input> estamos mostrando y ocultando el contenido que deseamos. Genial no?

Te dejo el enlace a Codepen para que revises todo el código que use.

Además un tutorial de como crear checkbox personalizados:

:active

Selecciona al elemento cuando estamos haciendo click sobre el.

Esta creo que deberíamos usarlo siempre que estilamos una etiqueta anchor como un botón. Nos dará la sensación de estar clicando realmente.

a {
  padding: 10px;
  text-decoration: none;
  color: #fff;
  background: rgb(0, 49, 112);
  border-radius: 4px;
}
a:active {
  background: rgb(0, 66, 151);
}

Kendall Espinoza

ya casi lo termino y amigos míos ya con esto puedo morir en paz jajajajajajjaja

Ivan Alejandro Fernandez Espinoza

Aquí algo de la documentación:
Pseudo-clases:
https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

Pseudo-elementos:
https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements

Axel Enrique Galeed Gutierrez

Pseudo clases y pseudo elementos

Les comparto mis apuntes. 😄

Psudoclases

Estos nos permiten llegar a las acciones o actividades que hace el usuario, como dar click, o al pasar sobre algún elemento.

:hover

Al momento de pasar nuestro mouse sobre un elemento va a pasar algo.

:nth-child(n)

Se le aplica los estilos al elemento número n.

Psudoelementos

Nos permite acceder a elementos de HMLT que no son accesibles con otros tipos de selectores como ser la primera letra o última de un texto, agregar contenido al inicio o final de un texto, etc.

::fisrt-letter

Aplica estilos a la primera letra de un texto.

::before

Aplica estilos o contenido al inicio de nuestro elemento.

::after

Aplica estilos o contenido al final de nuestro elemento.

Diferencias entre ambas

Las psudoclases se escriben con : y los psudoelementos con ::.

Captura de pantalla 2021-10-01 162112.png

Otros apuntes

Curso Definitivo de HTML y CSS

Clase

Lautaro Agustin Barrera

Hace unos días estaba luchando para lograr ponerle una sangría a un texto y con esta clase me di cuenta que puedo hacerla agregando un margin-left al pseudoelemento ::first-letter.

Juan Gaybre Flores

https://flukeout.github.io/

Les recomiendo este pequeño reto(juego), es muy divertido y les muestra más tipos de selectores 🤘

Eloy Chávez Gonzalez

Para colocar emojis rápido en Windows:

Combinación de teclas
Win + .

Hugo Alberto Torrent Irrazabal

:focus

La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla “Tab” del teclado.

HTML.

<input class="verde-input" value="Voy a ser color Verde Platzi"><br>
<input class="azul-input" value="Voy a ser color Azul Platzi">

CSS.

.verde-input:focus {
    background: #91c93d;
    color: white;
    font-weight: bold;
}

.azul-input:focus {
    background: #121f3d;
    color: white;
    font-weight: bold;
}

María Del Pilar Chávez Gutiérrez

Entre pseudoclases y pseudoelementos no es mucha la diferencia, los pseudoelementos son los que hacen referencia a ciertas partes de un elemento y las pseudoclases hacen referencia al estado de un elemento.

Yeison Betancourt

Hice este pequeno proyecto para practicar lo aprendido:

HTML:

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/p.css">
    <title>Practicing the learned</title>
</head>
<body>
    <header id="cabecera">
        <h1>Praticing the learned</h1>
        <img src="/img/lapiz.png" alt="pencil">
    </header>
    <form action="/formulario" method="post">
        <label for="search">🔎</label>
        <input type="text" id="search" name="search" placeholder="¿Que deseas buscar?">
        <button id="boton" type="button">Buscar</button>
        </form>
    <section>   
        <article>
            <h2>Titulo de mi post 1</h2>
            <p>Descripcion de mi post 1</p>
            <img src="/img/coffee.png" alt="coffe">
            <p>Texto del articulo que esta aca y este texto de prueba</p>
        </article>
    
        <article>
            <h2>Titulo de mi post 2</h2>
            <p>Descripcion de mi post 2</p>
            <img src="/img/monster.png" alt="monster">
            <p>Texto del articulo que esta aca y este texto de prueba</p>
        </article>
        <article>
            <h2>Titulo de mi post 3</h2>
            <p>Descripcion de mi post 3</p>
            <img src="/img/guitarra.png" alt="guitarra  ">
            <p>Texto del articulo que esta aca y este texto de prueba</p>
        </article>
    </section>
    <footer>
        <a href="#cabecera" id="inicio">Inicio</a>
        <a href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox?compose=lqrslwSpwtsDmjpNfNdmxwKxwdSpSqbzrRZcxbKDmkdWsNfPSKVTQSvVtXHxHtQcMVblFPgktcvqZLVMT" id="contact_me">Contactame</a>
        <p>Hecho con ♥</p>
    </footer>
</body>
</html>>

CSS:

<html {
    font-family: 'Roboto', sans-serif;
}
body {
    margin: 0;
    background-color: #B4C6A6;
}
header {
    background-color: #66806A;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
header > h1 {
    font-size: 2rem;
    margin: 0;
    display: inline-block;
    font-family: 'Rowdies', cursive;
    color: white;
}
header > img {
    width: 50px;
    margin-left: 30px;
}
form {
    margin: 35px 5px 35px 5px;
    padding: 20px;
    text-align: center;
}
#searching {
    width: 50px;
    margin-right: 40px;
    margin-top: 50px;
}
label {
    font-size: 50px;
    font-family: 'Roboto', sans-serif;
    color: white;
}
input {
    border-radius: 20px;
    padding: 15px;
    border-color: #32502E;
    height: 30px;
    width: 350px;
}
::placeholder {
    color: black;
}
#boton {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    border-color: #32502E;
}
section img {
    width: 400px;
}
section {
    width: 400px;
    margin: 0 auto;
}
section article {
    background-color: #E7EAB5;
    margin-bottom: 20px;
    border-radius: 1rem;
    padding: 1rem 0;
    cursor: pointer;
}
section article h2, section article p {
    margin: 1rem;
}
section article h2::first-letter {
    font-size: 40px;
    color: white;

}
footer {
    background-color:coral;
    padding: 1rem;
}
footer a {
    color: cornsilk;
    font-size: 25px;
    display: inline;
}
#inicio {
    float: left;  
}
#contact_me {
    float: right;
}
footer p {
   text-align: center;
}
a:link {
    color: cornsilk;
}
a:visited {
    color: gainsboro;
}
a:hover {
    color: royalblue;
}
a:active {
    color: blue;
}
footer p:hover {
    color: pink;
}>

Nickolle Salcedo

Me está gustando mucho este curso, siento que estoy aprendiendo bastante, estoy empezando desde 0 en la programación. Aquí agregué una checkbox :’) no es mucho pero trabajo honesto xd

Joorkar Rocha

:root no sirve para tener variable globales en nuestro CSS

:root {
	--nombre-variable: valor-variable;
}

ejemplo:

:root {
	--color-claro: white;
	--color-fondo: lightblue;
}

section {
	background: var(--color-fondo);
}

p {
	color: var(--color-claro);
}

Roberto Ballinas Hernández

Hice el ejercicio junto con la profe y me quedó esto:

Reynaldo Lenin Fuentes Garcia

Gracias a las pseudo-clases y los pseudo-elementos de CSS podemos realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo sin necesidad de crear una clase concreta.

Pseudo-clases para selección de hijos o hermanos

Las pseudo-clases más importantes para la selección de hijos o hermanos son las que se muestran en la siguiente tabla.

Pseudo-clases para los estados de un elemento

Podemos utilizar diferentes pseudo-clases para definir las propiedades de ciertos elementos con diferentes estados. Uno de los usos más comunes es en los enlaces <a> aunque se pueden aplicar en otros elementos.

Pseudo-elementos

Roberto Gamboa

Para colocar emojis en MAC ctrol+command+espacio

Jhoana España Urresty

Pachas Jenifer

Aqui esta el código por si alguien lo quiere 😃

Una de las pseudoclases que cuando lo busque me intereso fue el enabled y disabled, para los formularios, nunca lo habia visto y queria usarlo

intente aplicar lo aprendido de pseudoclases para hacer una pequeña practica

HTML

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aqui empieza la magia</title>
    <link rel="stylesheet" href="practica-selectores.css">
</head>
<body>
    <h1>Tipos de selectores</h1>
    <section id="uno" >Pseudoclases </section>
        <p>Permite llegar a las acciones que hace el usuario y estilizarla, ponerla bonita :) </p>
        <strong>Por ejemplo:</strong>
        <p>Esto hace <strong>:hover</strong> que si pasas el mouse por encima, cambia de color</p>


        <p><strong>:enabled y :disabled</strong> permite habilitar o deshabilitar un cuadro de un formulario</p>
        <form action="#">
            <label for="name">Enabled Input:</label>
            <input type="text" autofocus>
              <hr>
            <label for="name">Disabled Input:</label>
            <input type="text" disabled>
        </form> 

        <br>
    <section id="dos">Pseudoelementos </section>
</body>
</html>>

CSS

<*{
    background-color: rgb(189, 218, 251);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


h1{
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif
    color: rgb(58, 58, 88);
    text-shadow: 0.05em 0.05em rgb(231, 243, 248);
    font-size: 70px;
}

h4{
    text-align: center;
}

/*Body*/

body{
    padding: 10px 30px;
    text-align: center;
}

body section{
    display: inline-block;
    padding: 10px 140px;
    text-align: center;
    color: rgb(15, 14, 19);
    font-size: 30px;
    color: rgb(233, 255, 255);
    font-weight: bold;
}

#uno{
    background: rgb(255, 153, 250);
}

#dos{
    background: rgb(84, 214, 182);
}


/*Pseudoclase :hover*/

strong{
    color: black;
}

strong:hover{
    color: chocolate;
}


/*Pseudoclase :enabled y :disabled*/
  input {
    width: 60%;
    margin: 0;
    border: none;
    outline: 1px solid lightgrey;
    outline-offset: 2px;
  }

input:disabled {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  background: whitesmoke;
  padding: 1.5em;
  max-width: 400px;
  width: 100%;
  outline: 3px solid rgba(0, 0, 0, 0.25);
}


  label {
    margin-right: 3%;
    text-align: center;
    display: inline-block;
    width: 35%;
  }>

crimiro

He utilizado la pseudo clase :required para mostrar un borde rojo en el input cuando el valor no cumple con una validación simple de correo ([email protected])

function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

<input className='emailInput' required={!isCorrect} value={email} onChange={handleEmail}></input>

input:required {
  border: 1px solid red;
}

Miguel Ángel Ciavato Monsalve

Un poco de práctica + humor, el michi-iniciar-sesión.
.

Jesus Flores Renteria

para los que usan linux descarguen la extensión de :emojisense: después utilizan ctrl + i y podrán utilizar los emojis.

Manuel Ortiz

:read-write pseudo-class (pseudoclase)
.
Que uso le diste?
El uso que le di es para estilizar los elementos que se leen y escriben (en este caso los input), poniendo un fondo de color, bordear con darkorange, tambien dandole un radio del borde de 5px
.
Para que te sirve?
The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user

<p>Fill in your details</p>
    <form action="">
        <label for="email">Email Address</label>
        <input name="email" type="email" value="[email protected]">
        
        <label for="note">Short note about yourself</label>
        <textarea name="note">Don't be shy</textarea>

        <label for="pic">Your picture</label>
        <input name="pic" type="file" value="">

        <input type="submit" value="Submit form">
    </form>

label, input[type='submit'] {
            display: block;
            margin-top: 1em;
        }
        *:read-write {
            background-color: ivory;
            border: 2px solid darkorange;
            border-radius: 5px;
        }

.
todo el resultado de lo que hice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: salmon;
        }
        p::first-letter {
            color: teal;
        }
        p::before {
            content: "✨";
        }
        p:hover::before, p:hover::after {
            content: "🚀";
        }
        p::after {
            content: "💅";
        }
        p:hover {
            color: skyblue;
        }
        div p:nth-child(2) {
            color: violet;
        }
        ::placeholder {
            color: tomato;
        }
        #fs-toggle:not(:fullscreen) {
            background-color: #afa;
        }
        #fs-toggle:fullscreen {
            background-color: #faa;
        }
        label, input[type='submit'] {
            display: block;
            margin-top: 1em;
        }
        *:read-write {
            background-color: ivory;
            border: 2px solid darkorange;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <p>Hello</p>
    <div>
        <p>Platzi</p>
        <p>Master</p>
        <p>The best</p>
    </div>
    <!---->
    <input type="text" placeholder="name">
    <!--
        <div>
            <button id="fs-toggle">Toggle Fullscreen</button>
        </div>
    -->
    <p>Fill in your details</p>
    <form action="">
        <label for="email">Email Address</label>
        <input name="email" type="email" value="[email protected]">
        
        <label for="note">Short note about yourself</label>
        <textarea name="note">Don't be shy</textarea>

        <label for="pic">Your picture</label>
        <input name="pic" type="file" value="">

        <input type="submit" value="Submit form">
    </form>
</body>
</html>

result

.
source:https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write

Gonzalo Vasquez

Hola! Creé esto con lo aprendido en la clase 😃

sara_saad09

Sé que esto no aporta nada pero me encanta que la profesora pone estilos super girly, me da ternura.

Yancarlo Urdaneta

Para poder diferenciar una pseudoclase a un pseudoelemento, con ver cuandos : tienen es suficiente. Los pseudoelementos tienen dos : mientras que las pseudoclases solo un :

Aldo Monroy

https://www.youtube.com/watch?v=PscjFfzWofg

si usan linux, aquí les dejo como configurar el keyboard para poder usar los emojin con windows + punto

Braulio Guzman

Con la extensión Live Server la pagina se actualiza automáticamente

Mateo Javier Rojas Céspedes

para los que no saben como en su momento como desplegar la ventana de emojis en vsc pues simplemente tienen que presionar windows + . (es el punto del teclado no numerico)

Hernán Josué Hernández Lamprea

Les recomiendo esta página 😊 para aprender cosas de CSS:
https://www.w3schools.com/css/css_pseudo_elements.asp

Alejandro Naranjo

Cuando se usa la pseudoclase :active se ve de esta manera al selecccionar algun(os) caracter(es) de una palabra

Se puede ver la diferencia cuando no se hace click, sino q simplemente se pasa el cursor por encima de esa palabra (hover)

Darwin Franco

Hola amigos
En windows para poner el emoji debes presionar al mismo tiempo la tecla Windows y la tecla punto.

Saludos

Joseph Alejandro Arias Mesa

Para sacar los Emogi presionan la tecla windows y la tecla . al mismo tiempo.

Juan Camilo Cortes

![](

Luis Eduardo Tenorio Hernandez

Les comparto el siguiente recurso para entender cómo se utiliza el selector ::placeholder ^^
https://cybmeta.com/como-utilizar-el-atributo-placeholder-en-formularios#:~:text=Uso,este sea un valor vacío.

LESTHER XITUMUL MANUEL

Durante la práctica me di cuenta que el código CSS funciona tanto si se escribe dos veces los dos puntos para los pseudo-elementos como si sólo se escribe una vez. Y bueno, leyendo la documentación se encuentra que:

Isabel Cristina Pérez López

https://www.youtube.com/watch?v=8MONAr7R5yw

Hola chicos, les recomiendo muchisimo estos videos, Para saber un poco más de los pseudoclases y los pseudoelementos.
https://www.youtube.com/watch?v=wHY02FpNYnU

Deyvis Neyser Valdez Gavilan

Hola para los emojis en Ubuntu:

Pueden instalar la extensión de GNOME Shell integration:
- https://chrome.google.com/webstore/detail/gnome-shell-integration/gphhapmejobijbbhgpjhcjognlahblep
  |
Ya instalado lo activan desde aquí:
- https://extensions.gnome.org/extension/1162/emoji-selector/
  OJO: El boton para activarlo se encuentra en la esquina
  superior derecho de la página.
|
Una ves activado podran visualizar un emoji en la esquina superior derecho de su escritorio.

|
Solo seleccionen el emojis que deseen (hará un copiado) y péguenlo donde quieran 😂 😇 😍

Nabil Aparicio

tanto rosa, siento que entre en el mundo se sugar rush de ralph el demoledor

Erika Alexandra García Barrios

Este tema me sirvió para un parcial de hoy, para una pequeñita parte.

JoaoGarduno

Pseudo clases: Son aquellas “acciones” que permite al usuario interactuar con los elementos de nuestra página.
.
Pseudo elementos: Nos permiten el acceso a aquellos elementos de nuestra página, a los que no tienen un selector específico para realizar dicha acción.

Erik Dair Vergara Hernandez

marca las viñetas de la lista con el color verde

Camilo Tuñón Madrid

Espero te sirvan estas Q/A. 😃

Pregunta	Respuesta
¿Qué permiten las pseudo clases en CSS?	Las pseudo clases en CSS permiten aplicar estilos a elementos en función de su estado o posición en relación con la interacción del usuario
¿Qué pseudo clase se utiliza para aplicar estilos cuando se hace clic en un elemento?	Para aplicar estilos cuando se hace clic en un elemento se utiliza la pseudo clase :active
¿Cómo se utiliza una pseudo clase para aplicar estilos cuando se pasa el mouse sobre un elemento?	Para aplicar estilos cuando se pasa el mouse sobre un elemento se utiliza la pseudo clase :hover
¿Qué es el selector “nth-child” y para qué se utiliza?	El selector nth-child se utiliza para seleccionar elementos específicos en función de su posición en relación con sus hermanos
¿Cómo se diferencia la sintaxis de las pseudo clases y los pseudo elementos en CSS?	Las pseudo clases se escriben con un solo dos puntos ( : ), mientras que los pseudo elementos se escriben con dos dos puntos ( :: )
¿Qué permite hacer el pseudo elemento “first-letter” en CSS?	El pseudo elemento ::first-letter permite aplicar estilos a la primera letra de un elemento
¿Cómo se aplica un estilo a contenido que esté antes o después de un elemento en CSS?	Se utiliza el pseudo elemento ::before para agregar contenido antes de un elemento y ::after para agregar contenido después
¿Qué se puede hacer con el pseudo elemento “placeholder” en CSS?	::placeholder se utiliza para aplicar estilos a donde se compenzará a escribir, en un campo de entrada o input
¿Qué ventajas ofrecen las pseudo-clases y los pseudo-elementos en la estilización de páginas web?	Ofrecen flexibilidad en la aplicación de estilos a elementos específicos sin necesidad de clases o IDs adicionales

Hugo Alejandro Roldan

hace 2 meses

Pseudoclases: Nos ayudan a estilizar interacciones con el usuario (:). -hover: Acción al pasar el mouse por encima. Pseudoelementos: Aquellos que nos permiten acceder a HTML cuando CSS no puede acceder (::).

Carlos Ramos

hace 8 meses

Clase 9 - Tipos de selectores: Pseudoclases y pseudoelemenos

¿Qué es una pseudoclase?

Es un selector que nos permite definir el estilo de un estado especial de un elemento HTML.

**¿Qué símbolo debemos de usar para utilizar las pseudoclases?//

Los dos puntos (😃

¿Cuál es la sintaxis de una pseudoclase?

p:hover
        {
            color: salmon;
        }

¿Qué pseudoclases son las más comunes?

Hover.
Active.
Visited.
Not.
nth-child().

¿Qué hace la pseudoclase hover?

Nos permite agregar estilos a un elemento y estos se verán reflejados cuando el usuario pase el cursor por encima del elemento.

¿Qué hace la pseudoclase active?

Nos permite agregar estilos a un elemento al cual le estamos haciendo clic sostenido.

¿Qué hace la pseudoclase visited?

Nos permite agregar estilos a un elemento que no haya sido visitado por el usuario.

¿Qué hace la pseudoclase not?

Nos permite agregar estilos diferentes a un elemento que haga parte de un grupo de elementos.

Qué hace la pseudoclase nth-child()?

Nos permite agregar estilos a elementos los elementos hijos de un elemento según el valor que le indiquemos dentro del paréntesis o el valor que escribamos.

¿Qué valores podemos usar en la pseudoclase nth-child() y que hace cada uno de ellos?

Odd: se le agregan los estilos a los elementos hijos con su posición impar.
Oven: se le agregan los estilos a los elementos hijos con su posición par.

¿Qué es un pseudoelemento?

Es un selector que nos permite definir estilos en una parte específica de un elemento HTML.

¿Cuál es la sintaxis de los pseudoelementos?

   p::first-letter
        {
            color: skyblue;
        }

¿Qué símbolo debemos de usar para utilizar los pseudoelementos?

Dos dobles puntos (:😃

¿Qué pseudoelementos son los más comunes?

Before.
After.
First-later.

¿Qué hace el pseudoelemento before?

Nos permite agregar contenido en la parte inicial de un elemento HTML. Es importante saber que para el uso de este pseudoelemento necesitamos usar la propiedad content y su valor será lo que agregaremos al contenido

¿Qué hace el pseudoelemento after?

Nos permite agregar contenido en la parte final de un elemento HTML. Es importante saber que para el uso de este pseudoelemento necesitamos usar la propiedad content y su valor será lo que agregaremos al contenido

¿Qué hace el pseudoelemento first-latter?

Nos permite agregar estilos a la primera letra del contenido de un elemento HTML.

Elias Abraham Ocque Garcia

Hola chicos! , Para los que utilizan Mac.
PARA ABRIR LA PALETA DE EMOJIS 🦾 EN EL VISUAL STUDIO COD
CONTROL + COMAND + ESPACIO
Y Listo. Suerte.

Alejandra Moreno Vallejo

hace 10 meses

:required
Se usa para cualquier elemento que tenga el atributo required ej: <input> <textarea> o <select> , lo que nos permite esta pseudoclase es resaltar aquellos elementos que deben tener datos validos

Ejemplo

HTML

 <form action="">
            <input type="text" placeholder="Name" required>
            <button>Send</button>
 </form>

CSS

::placeholder {
            color:tomato
  }
 *:required {
            background-color: blanchedalmond;
        }

RESULTADO

Fabricio Huaquisto Quispe

hace 10 meses

Ahora recién comprendí bien la función del After y Before

Mariano Gobea Alcoba

hace 10 meses

:first-child selecciona los primeros elementos sin sus parientes
last-child selecciona los ultimos elementos sin sus parientes.

:first-child {
            font-size: 50px;
        }

Valeria Monge Gómez

Pseudoelementos

<code> 

<style>
    p {
      color: salmon;
    }
    /*Estilizar la primera letra*/
    p::first-letter {
      color: teal;
    }
    /*Escribir alguna cosa antes de los parrafos*/
    p::before {
      content: "✨";
    }
     /*Escribir alguna cosa despues de los parrafos*/
    p::after {
      content: "💅🏼";
    }
    /*Al pasar mouse cambia de color*/
    p:hover {
      color: skyblue;
    }
    /*El hijo numero 2 va a tener las sigueintes clases*/
    div p:nth-child(2) {
      color: violet;
    }
    /*Cambiar color placeholder*/
    ::placeholder {
      color: tomato;
    }
  </style>

Eduardo Acevedo García

En mac para sacar emojis 🐸 es: ctrl + cmd + espacio

Johann Chaparro

https://flukeout.github.io/

Lo compartio otro usuario pero sin duda es un gran aporte!

Es para practicar selectores de una manera muy dinamica!

Charles Duck Castillo Rosas

:root

Selecciona el elemento raíz de un árbol que representa el documento, osea el elemento <html>.
Es idéntico al selector html, excepto que su especificidad es mayor.
:root puede ser útil para declarar variables CSS globales:

:root {
	--main-color: green;
	--pane-padding: 5px 42px;
}

Byron José López Mayorga

Sirve para que una vez que le hayan dado click al vínculo, este despúes de ser visitado adquiere un nuevo color, una forma de hacer ver que el sitio ya fue visitado.

<a:visited {
        color: gray;
        }>

Benjamin Amaro

para cambiar el color cuando hacemos click en el input donde va nuestro nombre focus nos ayuda a encontrar en donde estamos escribiendo porque cambia el color 😄

 input:focus {
        background-color: pink;
    }

Juan camilo piedrahita londoño

Genial. algunos pseudoclases no lo conocía

Victor Hugo Vázquez Gómez

Hasta ahora me doy cuenta que con

p::first-letter {
  text-transform: capitalize;
}

podemos poner en mayúscula la primera letra 😢 😆 y yo haciendo funciones en javascript parseando el string y poniendo la primera letra en mayúscula.

JORGE PUMACALLAHUI PICHIRHUA

opsss
aquí les dejo documentación de los dos temas
Pseudoelementos :https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements

Pseudo-classes : https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

Luis angel osorio ochoa

para quienes no saben como sacar la lista de emojis se hace con windows. (tecla windows y punto)

Juan Andrés Cabrera Mendoza

Pseudo clases para links

En total podemos encontrar 4 psudo clases que nos ayudarán a customizar nuestros links, estos son :link :visited :hover :active . Es importante recordar que hay que escribirlos en cierto orden, porque algunos de ellos tienen jerarquía[ia sobre otros. Este orden es LVHA o también conocido como
LOVE HATE

L :link 
O
V :visited                         
E 

H :hover
A :active
T
E

Existe una pseudo clase llamada :link , en pocas palabras le pone un estilo los links que no han sido visitados. Una vez estos hayan sido visitado va a cambiar al estilo predeterminado, si es que no le hemos asignado alguno antes.

👀 La etiqueta <a> debe tener rellleno el atributo href o no cambirá el estilo.

/*Esto va a mostrar el link de color azul 💙*/
a:link {
        color: blue;
        }

Hay otra llamada :visited que te cambia el estilo de los links que ya hayas visitado.

/*Esto va a mostrar el link ya visitado a color rojo 💖*/
a:visited {
        color: red;
        }

:hover es que se explica en la clase, al pasar el cursor sobre este link su estilo cambia.

/*Esto va a mostrar el link de color verde al pasar el cursor sobre este 💚*/
a:hover {
        color: green;
        }

Y por último tenemos a :active, este nos va a mostrar cierto estilo mientras apretemos el link, una vez este deje de estar apretado va a volver a su estilo predeterminado o a alguno asignado con anterioridad.

/*Esto va a mostrar el link de color morado al hacerle click derecho o izquierdo 💜*/
a:active {
        color: purple;
        }

😊 Les tendría que quedar algo así:

				a:link {
        color: blue;
        }
        a:visited {
        color: yellow;
        }
        a:hover {
        color: green;
        }
        a:active {
        color: purple;
        }

Fuentes:
https://css-tricks.com/almanac/selectors/a/active/
https://developer.mozilla.org/es/docs/Web/CSS/:link

Yeison Betancourt

Para poner emojis en windows es facil:

tecla windows + .(punto)

Y ya…

Juan David Marin marulanda

amo el manual de imprimir 😃

DIEGO ARMANDO HERNANDEZ

para los que tengan windows con la tecla windows + la tecla punto aparece la venta de emojis en vs code

Jorge Avelino Ramírez

Atajo para agregar emoji en Mac

ctrl + command + space bar

Maria Gabriela Rodriguez Cuevas

Colocar pseudoelementos, por ejemplo: p::first-letter{} p::before{} p::after{}

Emilio Jesus Nuñez Pineda

I use the seudoelement call spelling-error that show me the error in my text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: salmon;
        }
        p::first-letter {
            color:crimson;
        }
        p::before{
            content: "💫";
        }
        p::after {
            content: "⭐";
        }
        p:hover {
            color: skyblue;
        }
        div p:nth-child(2) {
            color:blue;
        }
        ::placeholder {
            color: tomato;
        }
        ::spelling-error {
            text-decoration: wavy red;
        }
    </style>
</head>
<body>
    <p>Hi</p>
    <div>
        <p>11th grade</p>
        <p>Oxford</p>
        <p>the best</p>
    </div>
    <input type="text" placeholder="name">
    <p contenteditable spellcheck="true">
        My friends are coegdfgfddffbgning to the party tonight.
    </p>
</body>
</html>

Alejandro León

Les recomiendo este juego para practicar selectores de CSS 😃
https://css-speedrun.netlify.app/

Jesús David Vega Porras

Como habilitar los emojis en Ubuntu:

https://www.youtube.com/watch?v=D6BFRY5yrcY

Si no les sirve ese código, copien y peguen este (comentario de abajo, de la muestra del post no se va a poder):
2. https://www.thapatechnical.com/2020/05/how-to-type-emoji-in-vs-code-in-2020-vs.html

Se usa con :

Lear Angulo Quintasi

COMPARTO EL RETO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 p::first-line {
    color: blue;
  text-transform: uppercase;
}

ul li ::marker {
  color: red;
  font-size: 1.5em;
  
}
::selection {
  color: gold;
  background-color: red;
}
p::selection {
  color: white;
  background-color: blue;
}

</style>
<body>
    <div class="pod">
        <p>
            Sigo Aprendiendo
        </p>
        <span>
             Todos
        </span>
        <p>
           
        </p>
        <p>
            Los dias 
        </p>
        <p>
            En mi PC
        </p>


        <ul>
            <li>A</li>
            <li>Todas</li>
            <li>Horas</li>
          </ul>

    </div>
</body>
</html>

Jonnier Martinez

`:empty`

Con la seudoclase empty puedes ponerle los estilos a los elementos en Html que no contengan nada
Ejemplo : Si tenemos 3 cajas (div) los cuales 2 tienen contenido, 1 está vacía y queremos darle estilo solo a la que no tiene nada, entonces, aquí podemos hacer uso de la seudo-clase :empty
↓

Cristian Rafael Mendoza Maldonado

le quedo muy bonito, a mi me quedan cosas tipo caverna prehistorica jajaja

christian rojas

Una gran clase, por fin entiendo el tema de los pseudoelementos y las pseudoclaseees. Las utilizo mucho, pero no sabía diferenciar entre una u otra.

Éxitos a todos en sus carreras

Leonardo Claro

Me puse a hacer otras cosas, pero aproveché para aplicar algunas pseudoclases y pseudoelementos de la clase.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A6 - C9 Selectores3</title>
    <!--font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <!--font-->
    <style>
        * {
            font-family: 'Nunito', sans-serif;
        }
        .button {
            color: red;
            height: 100px;
            width: 100px;
        }
        #b1 {
            background-image: url(https://img.icons8.com/ios/344/animated.png);
            height: 100px;
            width: 100px;
            background-size: 100px 100px;
            border-radius: 20px;
        }
        #b2 {
            height: 100px;
            width: 100px;
            background-size: 80px 80px;
            background-image: url(https://img.icons8.com/ios/344/animated.png);
            background-repeat: no-repeat;
            background-position: center;
            display: inline-block;
            border-radius: 20px;
        }
        .button:hover {
            background-color: #ffeeda;
        }
        .button:focus {
            background-color: rgb(236, 223, 207);
        }
        p:hover::first-letter {
            color: red;
        }
        p::after {
            content: " Hola";
        }
        p:nth-child(2){
            font-weight: bold;
        }
        .text::placeholder{
            font-family: 'Nunito', sans-serif;
            font-size: 12pt;
            font-weight: bold;
            color: crimson;
        }
        #b3:hover {
            border-radius: 20px;
            background-color: #ffeeda;
        }
    </style>
</head>
<body>
    <h1 class="header1">Clase 9 | Pseudoclases y pseudoelementos</h1><br>
    <h2 class="header2">Prueba</h2>
    <div class="parrafos">
        <p>Hola</p>
        <p>Bienvenido a mi portafolio</p>
        <p>Echa un vistazo a los siguientes botones</p>
    </div>
    <input type="button" class="button" id="b1">
    <input type="button" class="button" id="b2"><br>
    <input type="text" class="text" placeholder="Type here">
    <input type="button" value="A darle" class="button" id="b3">
</body>
</html>

Tiberio Calderón

El atajo para abrir la ventana de emojis en Mac OS es “command + control + espacio”. Casi no encuentro cómo hacerlo 😃

juan jose castillo siñani

Siempre lo usaba, pero no sabia que eran llamados pseudoclases y pseudoelementos, excelente clase Estefany

Nohely Badillo

Platzi Team

Pseudoclases

Nos permiten llegar a las acciones que hace el usuario, e.g. Darle un click a un boton.

Algunos ejemplos de pseudoclases son los siguientes:
:active
:focus
:hover
:nth-child(n)
.

Pseudoelementos

Nos permiten acceder al contenido HTML al que no podríamos con los selectores mencionados en la clase anterior (básicos y combinados), e.g. La primera letra de un texto.

Algunos ejemplos mencionados son:
::after
::before
::first-letter
::placeholder
.

La principal diferencia entre las pseudoclases y los pseudelementos es que las pseudoclases se señalan con : mientras que los pseudoelementos con ::

Joaquín Rosales

hace 5 días

Con el pseudo-elemento ::spelling-error nos permite cambiar el color del indicador que aparece debajo de nuestro texto al deletrear una palabra mal, pero solo funciona con el idioma ingles.
Este pseudo-elemento nos permite cambiar solo unas pocas propiedades:
El color
El background-color
El tipo de cursor (Pointer u otro)
El caret-color
El outline
La text-decoration
El text-emphasis-color
Y finalmente el text-shadow.

Josue Israel Rojas Vilca

hace 7 días

Las pseudoclases se utilizan para aplicar estilos a elementos en función de su estado o interacción con el usuario, mientras que los pseudoelementos se utilizan para acceder y estilizar partes específicas de un elemento HTML que no están directamente presentes en el código HTML. Ambos son poderosas herramientas para dar estilo a tu página web de manera precisa y efectiva. 💚

ANDRES ALFONSO MIRA MEJIA

hace 9 días

✅

Marco Antonio Alducin Garcia

hace 14 días

Aca yo les paso un tip para que puedan poner emojis en VSC desde windows:
https://marketplace.visualstudio.com/items?itemName=devzstudio.emoji-snippets
lo instalan y con “:” y el nombre en ingles del emoji, ademas de los emojis unicode, lo pueden hacer sin problema.
NOTA: Recuerden que deben de usar en el content el emoki dentro de “”.

Code Conqueror7

Me imagino haciendo arte con código

Code Conqueror7

Ufff que guapo el comando :hover, increíble

Code Conqueror7

Se ve genial todo esto de psudos elemetns

Sergio Lira Camacho