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 鈥楳ayor 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 鈥楨res 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 鈥淭ab鈥 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 鈥渁cciones鈥 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 鈥渘th-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 鈥渇irst-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 鈥減laceholder鈥 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 鈥渃ommand + 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 馃槃