Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Tipos de selectores: pseudoclases y pseudoelementos

9/23
Recursos

Aportes 166

Preguntas 34

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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


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

https://flukeout.github.io/

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

Para colocar emojis rápido en Windows:

Combinación de teclas
Win + .

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.

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

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

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:[email protected]&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;
}> 

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

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

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

Para colocar emojis en MAC ctrol+command+espacio

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)

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

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

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

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 😂 😇 😍

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

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

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>

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

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 :

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

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:[email protected]&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 ::

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

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

html
   <ul>
        <li>python</li>
        <li>javascript</li>
        <li>go</li>
    </ul>

y como estilos use pseudoelementos


        ul li::marker {
            color: gold;
            font-size: 2em;
        }

Yo puse dentro del placeholder un background color aquamarine y probe colores de la tabla de codigos de colores, me esta encantando estas dinamicas. ;D

        input[type=checkbox] + label{
            color: blueviolet;
            font-style: italic;
        }
        input[type=checkbox]:checked + label{
            color:black;
            font-style: normal;
        }

De esta forma genero un input de checkbox que cuando es chekeado cambia de color y de fuente. Muy útil.

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

Implemento estas pseudoclases para diferencias entre campos de texto obligatorios y no obligatorios de una forma simple:

:required {
	color: tomato;
}

:optional {
	color: gray;
}

Indicar una pseudoclase para que el 2do. Párrafo tenga un estilo diferente a los otros párrafos dentro del div: div p:nth-child(2){}

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

Comparto una página de emojis, por si les sirve les dejo el enlace aquí

El hover me encanta, lo he visto tanto en imágenes cómo en títulos y estiliza muy bien la web.

Les dejaré mis apuntes de la clase en PDF, tomados en Notion aquí:
https://drive.google.com/file/d/1cIXUts8FlSZBTyVUiwoBgOyU5c3l4b1M/view?usp=sharing

Desafío. El pseudo-elemento ::marker en CSS selecciona el marcador de un o más de un elemento de lista, que normalmente contiene una viñeta o un número.

Esta vez usé el pseudo-elemento ::marker para reemplazar la viñeta de cada elemento de lista por una bellísima estrella.

Me gusta mucho la pseudo clase focus para los elementos de tipo input. También, link , la cual se utiliza para los elementos de tipo a.

Ya habia visto esta clase pero habia olvidado una gran parte de ella.

Me gusta la forma de explicar de la profe, en realidad hace muy fácil entenderle creo 😃

Las pseudoclases: permiten acceder a los estados de los elementos, mientras que el pseudoelemento permite modificar una parte especifica de un elemento.

Gratamente sorprendido con lo aprendido en esta clase.

Con el pseudoelemento ::marker podemos en nuestras listas <ul> configurar de que color y tamaño serán las viñetas o números ejemplo:

ul li::marker{
            color: rebeccapurple;
            font-size: 1.5em;
        }
    <section>
        <ul>
            <li>Juan Diego</li>
            <li>Ruiz Rojas</li>
        </ul>
    </section>

Resultado

Notas 📒

✏️ Pseudoclases

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

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

✏️ Pseudoelementos

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

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

Encuentro útil para usar nth-child() en tablas o listas; en vez de poner un valor numérico en el paréntesis podemos usar las palabras (odd) o (even) lo cual tomara solo elementos pares (even) o elementos impares(odd) para resaltar valores de forma intercalada

amo el manual de imprimir 😃

Solo agrege algunas cosas.
<!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>selectores-3</title>
<style>

    /*cambia el color de los parrafos*/
    .good-text{
        color:rgb(43, 226, 162)
    }
    .good-text::first-line{
        color: black;
    }
    /*pone un elemento despues de un parrafo*/
    p::after{
        content: "🎉";
    }
    /*pone un elemento antes de un parrafo*/
    p::before{
        content: "🎇";
    }
    /*pone un elemento antes del parrafo luego de pasar el puntero sobre este*/
    p:hover::before{
        content: "🎄";
    }
    /*cambia el color del parrafo luego de pasar el puntero sobre este*/
    p:hover{
        color: rgb(235, 135, 207);
    }
    /*cabia las caracteristicas de los parrafos dentro del (div)*/
    div P:nth-child(1){
        color: blueviolet;
        text-transform: uppercase;
        background-color: bisque;
    }
    div P:nth-child(2){
        color: rgb(43, 226, 55);
        text-transform: lowercase;
        border-style: dotted;
    }
    div P:nth-child(3){
        color: rgb(226, 43, 43);
        text-transform: capitalize;
        background-color: bisque;
        border-style: dotted;
    }
    span[data-descr] {
        position: relative;
        cursor: help;
    }
    
    span[data-descr]:hover::after,
    span[data-descr]:focus::after {
        content: attr(data-descr);
        position: absolute;
        top: 24px;
        min-width: 150px;
        border: 2px #aaaaaa solid;
        border-radius: 12px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 12px;
        z-index: 1;
    }
    /*cambia el color dentro del texto dentro del (input)*/
    ::placeholder{
        color: tomato;
    }
</style>

</head>
<body>
<p class=“good-text”>
Hola, espero la pasen bien.
Hoy quiero mostrarles lo que he aprendido,
jugar con los estilos de palabras, lineas
y parrafos para darle un mejor aspecto a
nuestro mensage. Genial¡
</p>
<div>
<p><span tabindex=“0” data-descr=“texto en minuscula en el codigo”>mayusculas</span></p>
<p><span tabindex=“0” data-descr=“texto en mayuscula en el codigo”>MINUSCULAS</span></p>
<p><span tabindex=“0” data-descr=“texto en minusculas en el codigo”>primera letra maysculas</span></p>
</div>
<input type="text"placeholder=“name”>
</body>
</html>

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

Hola compañeros, por acá les dejo este aporte, la verdad con esto entendí muy bien este tema:
https://www.w3schools.com/cssref/css_selectors.asp

Aquí el código:
<!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>
article p:first-of-type:first-letter{
color:mediumvioletred;
font-size: 30px;
font-style: italic;
}
div article:nth-of-type(1){
color: green;
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
font-size: medium;
font-style: italic;
}

   body{
       font-family:'Courier New', Courier, monospace;
   }
   div:nth-child(1):first-line{
       color: darkorange;
       font-size: medium;
       font-weight: bold;
   }
   div article:last-of-type{
       color:deeppink;
       
   }

</style>
</head>

<body>

<div>
    <p>Esta es la primera linea de la caja div.</p>
    <p>Esta es la segunda linea de la caja div.</p>
    <section>
        <p>Aquí hay un párrafo que está dentro de una section, dentro del div principal. Veamos cómo cambia su aspecto.</p>
    </section>
    
    <article>
        <p>Este párrafo pertenece a un article. Veamos cómo cambia de aspecto.</p>
        <p>Este párrafo pertenece a un article. Veamos cómo cambia de aspecto.</p>
        <p>Este párrafo pertenece a un article. Veamos cómo cambia de aspecto.</p>
    </article> 
    <div>
        <p>Este párrafo pertenece a un div dentro del contenedor principal div. Veamos cómo cambia de aspecto.</p>
        <p>Este segundo párrafo pertenece a un div dentro del contenedor principal div.. Veamos cómo cambia de aspecto.</p>
    </div>
    <article>
        <p>Este párrafo pertenece a un segundo article dentro del contenedor div. Veamos cómo cambia de aspecto.</p>
        <p>Este párrafo pertenece a un segundo article dentro del contenedor div. Veamos cómo cambia de aspecto.</p>
        <p>Este párrafo pertenece a un segundo article dentro del contenedor div. Veamos cómo cambia de aspecto.</p>
    </article> 
    <p>Este párrafo está bajo el div principal. Veamos cómo cambia de aspecto.</p>
    <p>Este párrafo está bajo el div principal. Veamos cómo cambia de aspecto.</p>
</div>
    <p>Este párrafo está por fuera de la caja div. Veamos cómo cambia de aspecto.</p>
    <p>Este segundo párrafo está por fuera de la caja div. Veamos cómo cambia de aspecto.</p>

</body>
</html>

![](

A esta clase se hubiera dedicado en el documento CSS y no dentro del htlm., asi hace que sea un poco mas confuzo, supongo que mas adelante ya se montara todo en css.

Nota: La diferencia es que losPseudo Elementos suelen hacer referencia a determinadas partes de un elemento, mientras que las Pseudo Clases suelen hacer referencia al estado del elemento.

este curso está genial

Guau
Estoy super emocionado

Usé el pseudo elemento ::selection sobre la etiqueta de párrafo §, al seleccionar el texto ejerce una acción, en este caso el background lo hice de color rojo y el color del texto, rojo; está muy interesante el curso y muy bien explicado.

()

Para jugar con las viñetas de las listas no ordenadas <ul>

/* css*/
        ::marker {
            color: blue;
            font-size: 1.4em;
        }
/* html */
    <ul>
        <li>caballos</li>
        <li>Vacas</li>
        <li>cabras</li>
    </ul>

¿Cuál es la diferencia entre una pseudo-clase y un pseudo-elemento?

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.

:first-of-type 

Selecciona el primer elemento de este tipo dentro de cualquier padre.

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.

ejemplo de pseudo elemento: p::first-letter { color: teal; } p::before { ✅ }

div p: nth-child(2) { color: violet; } min 4:30 le estamos diciendo que el segundo parrafo hijo numero 2 despues del div tenga la propiedad de color

Viendo esto me doy cuenta que combinando etiquetas html, asignando correctamente lo selectores, tenido a disposicion las propiedades en css, usando las pseudoclases y pseudoelementos puedes hacer basicamente lo que quieras.
.
Aun faltan temas importantes pero est base es super completa para hacer de todo
.
Por acá les dejo una documentacion completa para sobre css
.
https://developer.mozilla.org/es/docs/Web/CSS/Reference

Me encantaaaa! Tiene una voz muy dulce y hace que me enamore de css! 😍

Selectores Pseudoclases y Pseudoelementos
Pseudoclases: Permiten llegar a aquellas actividades o acciones que hace el usuario, como por ejemplo, darle clic a un botón.
.
Pseudoelementos: Nos permiten acceder a elementos de HTML que nos son accesibles justamente algunos tipos de selectores, por ejemplo, la primera letra de un texto, es decir agregar contenido antes o después de un texto, etc.

Para cambiar el color del curso de texto dentro de un input:

caret-color: blueviolet;

La semana pasada encontré que en la pseudoclase :nth-child (n) varía segun la posicion que quiera activar, lo miré en un poster y puede ver un elemento o ver mas de un elemento en el sitio web

PSEUDOELEMENTO ( : :SELECTION)

Nos permite modificar el estilo de la parte del texto que el usuario selecciona:

<style>
::marker{
color: blue;
font-size: 1.5 em;
}
</style>

<div>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</div>

Uso de Pseudoclase

:only-child

/* Selecciona cada <p>  si y solo si es el unico hijo de su padre */
p:only-child {
	background-color: red
}

Sintaxis

:only-child

HTML

<main>
    <section>
        <p>Soy hijo &uacute;nico quiero un hermano</p>
    </section>
    <section>
        <b>Soy el hermano mayor de esta familia,<p> yo su &uacute;nico hijo</p></b>
        <h3>Yo soy la hermana del menor</h3>
        <p>Yo solo soy un perro</p>
    </section>
</main>

CSS

p:only-child {
       color: red;
}

Resultado

Se puede cambiar el background de la selección del usuario y el color del texto con ayuda de

::selection{
            color: skyblue;
            background: blueviolet;
        }

Ay! Que bonito esa pseudo clase llamada Hover

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.

MUY BUEN TEMA.

Pseudoelemento
::marker:
El pseudo-elemento ::marker en CSS selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número.

ejemplo

<ul>
        <li>gatos</li>
        <li>perros</li>
        <li>conejos</li>
</ul>    

<style> 
 	ul li ::marker {
        color: blue;
        font-size: 1.2em;
   	 }   
</style>

al usar el pseudoelemento ::marker se genera lo siguiente