No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tipos de selectores: pseudoclases y pseudoelementos

9/24
Recursos

Existen otros tipos de selectores, además de los selectores básicos y combinadores, capaces de cambiar un estado o añadir algo más al elemento. Estos son denominados pseudoclases y pseudoelementos.

Cuáles son las pseudoclases

Una pseudoclase define el estilo de un estado especial de un elemento.

Sintaxis

selector : pseudoclase { 
    propiedad: valor;
}

:hover

Representa el estado en el cual el cursor está encima del elemento.

:active

Representa el estado de un elemento que no ha sido visitado.

:visited

Representa el estado de un elemento que ya ha sido visitado.

:not()

Representa el estado en el cual no coinciden los selectores que se indiquen.

:nth-child()

Representa el estado en el cual coinciden los hijos del elemento según el valor indicado.

Valores de palabras clave:

  • odd: los elementos hijos en posiciones impares.
  • even: los elementos hijos en posiciones pares.

Fórmula matemática: An+B donde A y B son números enteros.

Cuáles son los pseudoselementos

Un pseudoelemento define el estilo de una parte específica de un elemento.

Sintaxis

selector :: pseudo-elemento { 
    propiedad: valor;
}

::before

Sirve para agregar un contenido antes del elemento. El contenido es agregado mediante la propiedad content de CSS.

::after

Sirve para agregar un contenido después del elemento. El contenido es agregado mediante la propiedad content de CSS.

::first-letter

Sirve para añadir estilos a a la primera letra del texto de cualquier elemento.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 292

Preguntas 59

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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 + . )

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

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

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

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


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.

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

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:

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.

Para colocar emojis en MAC ctrol+command+espacio

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:

  2. Ya instalado lo activan desde aquí:


    |

  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

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

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

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

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

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.

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

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 “”.

Me imagino haciendo arte con código

Ufff que guapo el comando :hover, increíble

Se ve genial todo esto de psudos elemetns

*Dato de Pseudo-elements : No todo tiene compatibilidad con los navegadores.

Probé dos sencillos:

        p::first-line{
            color:red;
        }
        p:last-child {
            color:grey;
        }
<!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 {
            color: salmon;
        }
        p:hover {
            color: aqua;
        }
        div p:nth-child(2){ /*Pseudo-clase*/
            color: violet;
        }
        p::first-letter { /*Pseudo-elemento*/
            color:chocolate;
        }
        p::before {
            content: "✨";
        }
        p::after {
            content: "💚";
        }
        p:hover::before {
            content: "🤓";
        }
        ::placeholder {
            color: gray;
        }
        input:focus {
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <p>Hola</p>
    <div>
        <p>Platzi</p>
        <p>Master</p>
        <p>Lo mejor</p>
    </div>
    <input type="text" placeholder="Nombre">
</body>
</html>
  1. Pseudoclases:
  • :hover: Selecciona un elemento cuando se le pasa el cursor por encima.

  • :active: Selecciona un elemento cuando está siendo presionado o activo.

  • :focus: Selecciona un elemento cuando está siendo seleccionado o enfocado.

  • :visited: Selecciona un enlace visitado.

  • :nth-child(n): Selecciona el enésimo elemento hijo de su padre.

  • :first-child: Selecciona el primer elemento hijo de su padre.

  • :last-child: Selecciona el último elemento hijo de su padre.

  • :not(selector): Selecciona elementos que no coinciden con el selector especificado.

  • :empty: Selecciona elementos que no tienen contenido interno.

  1. Pseudoelementos:
  • ::before: Inserta contenido antes del contenido de un elemento.

  • ::after: Inserta contenido después del contenido de un elemento.

  • ::first-line: Selecciona la primera línea de texto dentro de un elemento.

  • ::first-letter: Selecciona la primera letra del texto dentro de un elemento.

  • ::selection: Selecciona parte del texto que ha sido seleccionado por el usuario.

  • ::placeholder: Selecciona el texto de marcador de posición dentro de un campo de entrada.

  • ::focus-within: Selecciona un elemento padre cuando uno de sus hijos tiene foco.

  • Estos son solo algunos ejemplos de pseudoclases y pseudoelementos en CSS. Estos selectores adicionales permiten aplicar estilos a elementos en estados específicos o modificar partes específicas de un elemento. Son útiles para crear interacciones y estilos más avanzados en una página web.

:optional
La pseudo-clase :optional de CSS representa cualquier elemento <input>, <select>, o <textarea> que no tenga el atributo required establecido 

MDN es lo máximo!

Nota Importante: para que no pierdan tiempo como yo, el :hover va inmediatamente después de su etiqueta, sin espacios ❤️

y soporten 💅🏻

<!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>pseudo</title>
    <style>
        p {
         color: red;   
        }
        P:hover {
            color: blue;
        }
        div p:nth-child(2){
            color: forestgreen;
        }
       div  p:nth-child(3)::first-letter{
            color:black;
        }
        ::placeholder {
            color: red;
        }
    </style>
</head>
<body>
    <p>HOLA MUNDO</p>
    <div>
        <p>fuerza</p>
        <p>entuciasmo</p>
        <p>fe</p>
    </div>
    <input type="text" placeholder="name">
</body>
</html>

Creo que seria bueno que colocaran o compartieran un PDF, un archivo con las pseudoclases y los pseudoelementos esenciales, así como las etiquetas que pusieron en HTML

En la explicación que aparece en Recursos, el ejemplo y descripción que se presenta para la pseudoclase “:active” en realidad corresponde a la pseudoclase “:link”.

Que bueno esta el curso…

<style>
p:hover{
color: darkgreen;
}
div p:nth-child(2){
color: blue;
}
p::first-letter{
color: rgb(57, 98, 15);
}
p::before{
content:“⚽⚽”;
}
p::after{
content:“🎸🎸”;
}
::placeholder {
color: darkgreen;
}

El pseudoelemento de ::selection nos permite personalizar la seleccion de texto

ehhh vengo de otro curso de css y justo este tema no me quedo muy claro, con esta clase lo entendi mejor, gracias 😄