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 😄.

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

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 ::

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:

Creando un Checkbox personalizado

: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);
}

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 ::.

Otros apuntes

Curso Definitivo de HTML y CSS

Clase

Pseudo clases y pseudo elementos

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.

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

https://flukeout.github.io/

Para colocar emojis rápido en Windows:

Combinación de teclas
Win + .

: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;
}

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;
}> 

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.

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

: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);
}

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

Para colocar emojis en MAC ctrol+command+espacio

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

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.

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

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

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%;
  }> 

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;
}

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

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

: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

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

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

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

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

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

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

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)

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

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)

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

Saludos

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

![](

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.

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:

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

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

Hola para los emojis en Ubuntu:

1. Pueden instalar la extensión de GNOME Shell integration:

   • https://chrome.google.com/webstore/detail/gnome-shell-integration/gphhapmejobijbbhgpjhcjognlahblep
     |

2. 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.

   
   |

3. Una ves activado podran visualizar un emoji en la esquina superior derecho de su escritorio.
   

   
   |

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

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

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

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.

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

Les dejo este juego para aparender pseudoclases de manera divertida.

✅

Espero te sirvan estas Q/A. 😃

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 (::).

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.

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

: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

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

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

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>

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

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

Es para practicar selectores de una manera muy dinamica!

https://flukeout.github.io/

: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;
}

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;
        }> 

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;
    }

Genial. algunos pseudoclases no lo conocía

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.

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

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

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 

1. 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;
        }

1. 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;
        }

1. :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;
        }

1. 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

Para poner emojis en windows es facil:

tecla windows + .(punto)

Y ya…

amo el manual de imprimir 😃

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

Atajo para agregar emoji en Mac

ctrl + command + space bar

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

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>

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

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 :

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>

: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
↓

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

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

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>

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

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

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 ::

< /p>

El elemento :root

Util para declarar constantes en nuestro CSS

Diferencia entre pseudoclases y pseudo elementos

La diferencia entre pseudo-clases y pseudo-elementos es sutil. En general, los pseudo-elementos suelen hacer referencia a determinadas partes de un elemento, mientras que las pseudo-clases suelen hacer referencia al estado del elemento.

Otra diferencia importante es que un pseudo-elemento sólo puede aparecer al final de un selector, mientras que una pseudo-clase puede aparecer en cualquier elemento del selector.

Diferencia entre pseudoclase y pseudoelemento.

la pseudoclase :nth-child(odd) selecciona los elementos impares, y nth-child(even) selecciona los elementos pares

Encontré la pseudoclase ‘Selection’ cuya función es modificar las propiedades de un selector cuando este es “sombreado” o seleccionado por el cursor. un ejemplo de esto es:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
p::selection{
color: blue;
background-color: aqua;
}

</style>
</head>
<body>
<p>Este texto es para probar el pseudoelemento selection.</p>
</body>
</html>

Como pueden observar, al seleccionar el texto, este cambia de color azul oscuro y el backgroud-color de color agua.

Increíble lo que descrubri con el uso del pseudo-elemento ::cue le puede dar estilos a los captions que tienen los videos

Probé dos sencillos:

        p::first-line{
            color:red;
        }

        p:last-child {
            color:grey;
        }

Se ve genial todo esto de psudos elemetns