Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

Tipos de selectores, pseudo-clases y pseudo-elementos

13/43
Recursos

*(asterisco): Es el selector universal. Las propiedades se aplicaran a todos los elementos de nuestro HTML.

Tipo: Son selectores que se aplican a cierto elemento HTML en específico. Las propiedades se aplicaran a la etiqueta que queremos, por ejemplo p, body, html, div, etc.

Clase: Si nuestras etiqueta de HTML tienen un atributo de class podemos usar ese valor o identificador para que los cambios en el CSS afecten únicamente a ese elemento.

ID: Es similar al anterior, si la etiqueta HTML tiene un ID podemos afectar solo ese elemento.

Las Pseudo-clases y Pseudo-elementos nos permiten ser aún más específicos con qué elemento o partes de nuestros elementos deben recibir los estilos.

Para usarlas debemos definir el selector base (por ejemplo, p) seguido de dos puntos y la pseudo-clase que queremos estilizar (por ejemplo: p:first-child). En el caso de los pseudo-elementos debemos usar el dos puntos 2 veces (p::first-letter).

/* Asterisco (universal) */
* {
  margin: 0;
}

/* Tipo */
h1 {
  color: red;
}

/* Clase */
.saludo {
  font-size: 2em;
}

/* ID */
#id {
  border-radius: 20px;
}

/* Pseudo-clases */
p:first-child {
  color: white;
}

p:last-child {
  color: purple;
}

p:nth-child(2n) {
  color: red;
}

Aportes 429

Preguntas 51

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Para emojis en Windows es Windows + . (Punto)

Encontre que para Pseaudo-clase en el ejemplo que hicimos de los pare e impares, hay tambien un comando que lo ahce directamente. ODD para impares y EVEN para pares.

p:nth-child(odd) {

}

p:nth-child(even) {

}

excelente clase, me gusto mucho.

Para los que tienen el problema de que el último elemento no cambia de color, es decir:

p:last-child

Deben encerrar los elementos <p> en un contenedor, por ejemplo un <div>.

Este error se debe a que las pseudo-clase :last-child representa el último elemento entre un conjunto de elementos hermanos.

Como nota, tercero es 3rd y no 3th

En windows puedes sacar la lista de emojis con
la tecla windows + . 😁😁😁

Aqui pueden practicar sus selectores, clases, etc,

https://flukeout.github.io/

Shift + Alt + A
para comentar/descomentar

Con windows 10 si hacen tecla windows + . abre la librerías de emojis 😄🖖

Con el simobolo de Windows + punto se abre las pestaña de emojis

Excelente clase. Solo una observacion. En tercer numero ordinal en ingles es “3rd”, no “3th”.

Como agregado a la parte del pseudo selector nth-child()

También, para seleccionar los pares e impares mucho más fácil, podemos hacerlo de la siguiente manera:

Seleccionando impares

p:nth-child(odd) {
    color: blue;
}

Seleccionando pares

p:nth-child(even) {
    color: red;
}

Solamente recuerda:

La palabra **odd ** viene del ingles y en español significa impar
La palabra **even ** viene del ingles y en español significa par

All CSS Pseudo Classes


All CSS Pseudo Elements

También puedes interactuar con los pares even e impares odd de la siguiente manera:

p:nth-child(even) {
    /* Rules */
}

p:nth-child(odd) {
    /* Rules */
}

En windows, para acceder a los emoticones sin un link externo pueden pulsar la tecla “windows” + " . " y obtienen los emoticones.

Un aporte muy valioso para el desarrollador 🤣🚀💪
En windows los emojis se agregan con la tecla windows + .(windows y punto presionados en este orden)

Los ID, nos sirven para “identificar” un unico elemento en toda nuestra pagina web, por lo tanto no pueden haber 2 iguales.

Los ID se usan generalmente para trabajar con JavaScript.

pseudo whaaaaaat???

CSS Diner https://flukeout.github.io/, Excelente recurso para aprender y profundizar sobre selectores, pseudo-clases y pseudo-elementos.

Para colocar emojis en windows se usa la tecla windows + tecla de punto win + .
😎

Si quieres usar Emojis en Windows puedes usar el atajo de teclado Windows + .

Es decir la tecla windows + la tecla Punto “.”

Les recomiendo mucho esta página para practicar esas operaciones matemáticas de los pseudo clases 👍

https://css-tricks.com/examples/nth-child-tester/

En Mac también puedes abrir los emojis con: control + Command + spacebar 🙄

Grupo de aprendizaje para temas relacionados a la Escuela de Javascript, interesados unanse aqui: https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

En Windows seria con la combinación de teclas: Windows + punto (.)
(Versiones mas recientes de Windows 10)

Creo que hay un error aquí, para aplicar el estilo a un determinado <p> según su orden de aparición, debe ser usado nth-of-type y no nth-child. Su funcionamiento es muy diferente, el primero aplica estilo un etiqueta en orden de aparición, y el segundo aplica estilos a los hijos que contenga dicha etiqueta, dejo este link y este otro para más información.

Clase 9 Tipos de selectores, pseudo-clases y pseudo-elementos.

¿cómo seleccionar sólo un elemento o unos elementos específicos de nuestro documento para indicarle estílos CSS?
utilizamos los selectores de acuerdo a su tipo:

<h3>Selectores:</h3>
  1. Selector universal:
    * {
        margin: 0;
    }

el asterisco * es el selector universal, esto significa que para todos los elementos de nuestro documento se aplicarán los estílos descritos entre las llaves.
2. Selector de tipo:

    p {
        color: red;
    }

estos selectores hacen referencia a las etiquetas, por ejemplo, en este caso a todas las etiquetas de parrafo <p></p> se les aplicará los estilos indicados en las llaves, normalmente no es muy utilizado este tipo de selectores puesto que no son prácticos a la hora de crear una aplicación grande.
3. Selectores de Clase

    .saludo {
        font-size: 2em;
    }

estos selectores utilizan el atributo class existente en las etiquetas para hacer referencia al objeto en nuestro documento, así <h1 class = "saludo"> Hola </h1> tendrá un tamaño de fuente de 2em según nuestro código previamente escrito.
4. Selectores por Id

    #id {
        border-radius: 20px;
    }

el id aumenta la especificidad del selector, no es muy recomendable trabajar con ellos debido a su espicificidad.

<h3>Pseudo-Clases:</h3>

si queremos aplicar estílos a un elemento dependiendo de el número de veces que ha aparecido, por ejemplo el primer parrafo de una pagina web, el último párrafo, o el párrafo n del sitio, podemos utilizar las Pseudo-clases.

    p: first-child {
        color: white;
    }

    p: last-child {
        color: purple
    }

    p: nth-child(n+2) {
        color: red;
    }

como vemos, vamos seleccionando los “hijos” de la etiqueta <p></p> según su número de aparición, por ejemplo en una web de 10 párrafos el primer código haría referencia a el primer párrafo, el último haría referencia al parrafo 10, y el segundo depende de la ecuación matemática que utilicemos seleccionará los elementos.

<h3>Pseudo-elementos</h3>

al igual que las Pseudo-clases los Pseudo-elementos se añaden a los selectores, pero no cambian al elemento completo, si no que se selecciona una parte del elemento para aplicarle los estilos, normalmente se utiliza dobles doble puntos “::” para diferenciar a las Pseudo-clases de los Pseudo-elementos, también se pueden utilizar junto a las pseudo-clases.

La forma de usar el tipo de selector CLASE es:
en CSS:

.myClass{
        font-size: 2em;
        color: blueviolet;
    }

Uso de la clase en HTML:

<p class="myClass">Hola parrafo 2</p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*Las Pseudo-clases*/
    /*p:first-child{                      Primero
        color: pink;
    }
    p:last-child{                        Ultimo
        color: brown;
    }
    p:nth-child(2n){                    Numeros pares
        color: red;
    }
    p:nth-child(2n+1){                 Numeros Impares
        color: blue;
    }
    
    /*Pseudo-elementos*/
    p::first-letter{                    /*primera letra*/
        color: red;
        font-size: 20px;
    }
</style>
<body>
    <p>🐊 Cocodrilo</p>
    <p>🐙 Pulpo</p>
    <p>🐺 Lobo</p>
    <p>🦁 Leon</p>
    <p>🐢 Tortuga</p>
    <p>🦜️ Guacamaya</p>
</body>
</html>```

Les paso mi apunte de la clase, por si les puede ser de utilidad:

En CSS contamos con disintos selectores que nos permiten elegir elementos de nuestra pagina para darle estilos, algunos nos permiten elegir un elemento HTML en particulas mediante clases o a todos los elementos de ese tipo. Aqui los distintos selectores en CSS:

(asterisco): Es el selector universal. Las propiedades se aplicaran a todos los elementos de nuestro HTML.

Tipo: Son selectores que se aplican a cierto elemento HTML en específico. Las propiedades se aplicaran a la etiqueta que queremos, por ejemplo p, body, html, div, etc.

Clase: Si nuestras etiqueta de HTML tienen un atributo de class podemos usar ese valor o identificador para que los cambios en el CSS afecten únicamente a ese elemento.

ID: Es similar al anterior, si la etiqueta HTML tiene un ID podemos afectar solo ese elemento.

Las Pseudo-clases y Pseudo-elementos nos permiten ser aún más específicos con qué elemento o partes de nuestros elementos deben recibir los estilos.

Pseudo-Clases

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

Para usarlas debemos definir el selector base (por ejemplo, p) seguido de dos puntos y la pseudo-clase que queremos estilizar (por ejemplo: p:first-child).

Pseudo-Elementos

Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

En el caso de los pseudo-elementos debemos usar el dos puntos 2 veces (p::first-letter). Los cuales añaden a los selectores, y nos permiten añadir estilos a una parte concreta del documento.

/* Asterisco (universal) */
* {
  margin: 0;
}

/* Tipo */
h1 {
  color: red;
}

/* Clase */
.saludo {
  font-size: 2em;
}

/* ID */
#id {
  border-radius: 20px;
}

/* Pseudo-clases */
p:first-child {
  color: white;
}

p:last-child {
  color: purple;
}

p:nth-child(2n) {
  color: red;
}

/* Pseudo-elementos */
p::first-letter {
  color: blue;
}
p::first-line {
  font-size: 22px;
}

correccion en la gramatica. Nada que ver con el codigo pero hablando de numeros en ingles el 3ero seria 3rd y no 3th.

Open In Default Browser es una extensión para vsCode que brinda un shortcut para ejecutar el html en el navegador con solo pulsar ctrl + 1 (Windows) / command + 1 (Mac), por si les sirve xD.

Si les resulta útil, hay una extensión en Visual Studio Code para insertar emojis.

Para los que tengan Mac:
La lista de emojis se activa con el comando Ctrl + Cmd + spacebar (barra espaciadora)

:emojisense: una extensión en VS para los que somos pobres 😦
con Ctrl + i se muestra el listado de emojis.

  • dato–> para comentar líneas de código en vs code, después de seleccionar la líneas a comentar se presiona la combinación CTRL+ALT+SHIFT

Si utiliza Windows pueden usar "Tecla Windows " + “.”, de esta manera se pueden agregar emojis más fácil. 👍

Un juego que seguro los ayudara a entender esto es este CSS DINER

Para los que usamos windows no es necesario instalar nada para poner emojis 🎉. Basta con precionar: "tecla windows + . " y ya 😉.

Importante para tener en cuenta: No repetir un nombre de id o identificador, el id es el identificador único de un elemento dentro de un mismo documento, algo que sí se puede hacer con las clases, por ejemplo puedo tener lo siguente:

<div class="comment"> Este es un comentario</div> 
                <div class="comment"> Este es un comentario diferente</div> 
                <div class="comment"> Este es otro comentario</div> 
            </div>

Pero no debo tener:

<div id="comment"> Este es un comentario</div> 
                <div id="comment"> Este es un comentario diferente</div> 
                <div id="comment"> Este es otro comentario</div> 

Ya que si hacemos los anterior, no es buena práctica y segundo cuando tratemos de usar javascript tendremos un mal comportamiento en nuestra aplicación pues aplicará la acción que deseemos al primer id que contenga el nombre que indiquemos a la acción.

Pueden ver esta referencia sobre los id:
https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id

Que buena clase, no tenia ni idea de estos elementos de CSS! 🥳

Por si no les coloreo usando last-child intenten encerrando el codigo con otra etiqueta asi:

En el ejemplo uso main pero funsiona tambien con div o cualquier otra

<body>
    <main>
        <p>Mico🐒</p>
        <p>Oso polar🐻‍❄️</p>
        <p>Serpiente 🐍</p>
        <p>Bufalo🦬</p>
        <p>Zorro🦊</p>
    </main>
</body>

Esto se debe a que, aunque no lo veas, hay un elemento que el navegador inserta antes del final del <body>.

lo puedes comprobar inspeccionando tu codigo desde el navegador

😲 Ahora aprendí porque se usa el nth-child, de esos detalles que hasta ahora te hacen sentido. #HistoriaREAL

Aprender a manejar Pseudo-clases y pseudo-elementos es super importante para optimizar el numero de selectores de nuestro CSS.

En Visual Studio presiona Windows + . y te sale una lista de emojis.

Entonces:

  • Pseudo clases: Son los estilos de las etiquetas html

  • Pseudo elementos: Son los estilos de los elementos dentro de las etiquetas
    Es correcto?

Tipos de selectores:

  • Universal (*)
  • Tipo (h1, p)
  • Clase (.saludo)
  • Id(#contenido)

buena clase, primera vez que veo que los css reconocen operaciones matematicas… ahora aprendi algo nuevo 😉

No conocía las pseudo-clases y pseudo-elementos… ¡Que fantástico!

Las pseudo-clases especifica un estado especial a un elemento seleccionado.

p:first-child {
    color:red;
}
/*Convierte todo el texto del primero hijo del bloque de código en rojo. Todo el texto */

.
A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial, sino que permiten añadir estilos a una parte concreta (a veces muy específica) de un elemento.

p::first-letter {
  color: red;
  font-size: 20px;
}
/* Toma solo la primera letra de un elemento, no todo su contenido. Solo la primera letra.*/

.
Hay que tener en cuenta que las pseudo-clases se indican con : después del selector y los pseudo-elementos se indican con :: después del selector.
.
Por acá comparto lo siguiente:

  1. Indice de las pseudo-clases estándar
  2. Listado de pseudoelementos

Otra cosa importante es que el pseudoelemento first-child, last-child, nth-child() solo funcionan si y solo son el primer elemento de su contenedor padre por ejemplo:

<div>
<p> 1 </p>
<p> 2 </p>
<p> 3 </p>
<p> 4 </p>
<p> 5 </p>
</div>

En el caso de que no sea el primer elemento de su contenedor padre, como en este ejemplo:
el no va a seleccionar el primer elemento y menos aplicar el estilo. Para solucionar esto en esos casos es mejor utilizar first-of-type, last-of-type, nth-of-type().

<div>
<h1> Sucesion de numeros </h1>
<p> 1 </p>
<p> 2 </p>
<p> 3 </p>
<p> 4 </p>
<p> 5 </p>
</div>

Espero que haya sido de ayuda este aporte.

En Windos10 también se puede sacar oprimiendo [Windows + .]

A todos los que nos les funciona el p:last-child:

la pseudo-clase last-child deja de funcionar cuando la extension live server, por lo que si quieres ver los resultados debes abrir el archivo desde el mismo explorador de archivos

Si quieren profundizar en las pseudo-clases aquí les dejo una página intereactiva para conocerlos y prácticarlos 💪:
https://flukeout.github.io/

Les recomiendo mucho el curso de desarollo web.

Como obtengo esto ?

A cambio de esto 😭

hola no me quedo muy claro lo de psseudo-clases y pseudo-elementos en cuanto a uso ¿en que momento se usa?¿que afecta uno o el otro?

En 3:00 cuando dice que

p:first-child{
	color: white;
}

quiere decir que al primer hijo que tenga <p> se le van a aplicar esas propiedades se equivoca, ya que first child representa al primer elemento de un grupo de elementos hermanos, es decir para ese caso no aplica al primer hijo de <p> sino a los elementos <p> que sean el primer hijo entre elementos de un mismo padre:
se ilustra mejor en este ejemplo:
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>Mi página WEB</title>
    <link rel="stylesheet" href="platzi_demo.css">
</head>
<body>
    <section>
	<p>This text is selected.</p>
	<p>This text is not selected.</p>
    </section>
    <section>
    	<p>This text is selected.</p>
	<p>This text is not selected.</p>
    </section>
    <section>
    	<h1>this text is not selected, is not a p</h1>
        <p>This text is not selected, is not the first child</p>
    </section>
</body>
</html>

CSS:

p:first-child{
    color: #98ca3f;
    background-color: #121f3d;
}

Una nota interesante sobre la diferencia entre las pseudo clases y los pseudo elementos, está en que generalmente los pseudo-elementos hacen referencia a determinadas partes de un elemento, mientras que las pseudo-clases suelen hacer referencia al estado de ese elemento.

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

hay un pequeño “juego” que puede ayudar a reforzar un poco el tema https://flukeout.github.io/ espero les funcione 😃

Tantos años de haber entrado al mundo laboral y de usar HTML y CSS pero hasta ahora me doy dando cuenta que existen las Pseudo-clases y Pseudo-elementos la verdad nunca los habia escuchado ni mucho menos utilizado muy interesante el curso

Muy interesante las Pseudo-clases

Juego para practicar CSS



https://flukeout.github.io/

woo no conocía nth-child sinceramente!

Martes 27 de Agosto: 00:25am
Es momento de dormir

Si tu OS es Windows 10 puedes insertar emojis con el siguiente atajo.

(Windows + .) 👌

Para poder colocar emojis en Windows usaremos las combinación de teclas siguiente:

Windows + . (punto)

No sabia que se podia colocar asi, yo siempre utilizaba clases para cambiarle los estilos

En la documentación de Mozilla pueden checar la descripción de las pseudo-clases y pseudo-elemntos en ellas vienen las diversas opciones a usar. También un articulo más especifico para entenderlos con ejemplos.

No sabía lo de las pseudo clases, bastante interesante

“Como pueden ver no estamos viendo ningúno de los cambios que hicimos” HAHAHAHAHAHAHAHA

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    p:first-letter{
      color: red;  **asignar color a promera letra
      font-size: 100px;  **asignar tamaño a primera letra
    }
    /*p:first-child{ **asignar color a la primer palabra
      color: blue;
    }
    p:last-child{  **asignar color a la ultoma palabra
    color: red;
  }
    p:nth-child(2n){  **para seleccionar objetos pares
      color: green;
    }
    p:nth-child(2n+1){  *para seleccionar objetos impares
      color: blue
    }*/
  </style>
  <body>
    <p>perro</p>
    <p>conejo</p>
    <p>gato</p>
    <p>sapo</p>
  </body>
</html>```
Para la pseudoclase :nth-child() puede tener como parámetro even u odd para los hijos pares o impares.

Pseudo-elementos: Al igual que las pseudo-classes, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

/* Selecciona la primera línea de un <p> */

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Platzi</title>

    <style>
        /* Use this to select the first element  */
        p:first-child {
            color: darkturquoise;
        }
        /* Use this to select the  last element  */
        p:last-child {
            color: deeppink;
        }
        /* Use this math functions like par 2n or 2n+1 */
        p:nth-child(2n) {
            color: darkmagenta;
        }
    </style>
</head>
<body>
        <p>🐰 Rabbit</p>
        <p>🐶 Dog</p>
        <p>🐮 Cow</p>
        <p>🐁 Mouse</p>
</body>
</html>```

Aunque este curso hasta el momento se me ha hecho muy similar al curso de HTML Y CSS de rulótico (El cual es un excelente curso con un excelente profesor) considero que en el presente curso la profesora explica a mucho más detalle ciertos temas y ayuda muchísimo a tener una perspectiva más amplía del desarrollo frontend.

El código de

p:last-child(2n) {
	color: red;
}

También se puede poner como:

p:nth-child(even) {
color: red;
}```

“even” denota los pares
"odd" denota los impares…
Prueben 😄
Saludos!

CSS siempre me había costado trabajo (pues el lado visual no es el mio, siempre he desarrollado backend), pero haces que parezca muy fácil. Gracias!

Para los pseudo elementos
HTML

Documento CSS

Resultado

Para Comentar en Mac y Visual Estudio:
(Sombreas previamente el texto a comentar)
Shift + Alt + A

css puro o framework?

Mi aporte de pseudo clases
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<style>
/* p:first-child {
color: blueviolet;
}
p:last-child {
color: silver;
}*/
p:nth-child(2n) {
color: yellowgreen;
}
p:nth-child(2n+1) {
color: crimson;
}
</style>
<body>
<p>🐶 Perro</p>
<p>🐘 elefante</p>
<p>🐢 tortuga</p>
<p>🐻 oso</p>
<p>🐬 delfin</p>
<p>🐧 pinguino</p>
</body>
</html>

Profe: se refiere a los número ordinales no ordinarios.

Y el ordinal tercero en inglés es 3rd no 3th.

Para los emojis en Windows 10 es combinando la tecla de WINDOWS + .

Aprendí más en este video que en lo básico de CSS en la Universidad, ¡gracias!


Cuando se quiere trabajar dando estilos a elementos pares e impares, también se puede usar odd para los elementos impares y even para los elementos pares. Ejemplo
p:nth-child(odd) {
color: blue;
}
Y daría el mismo resultado.

Hola a todos, estoy intentando hacer que una tabla tenga sombreado intercadalo, pero no lo he conseguido. Agradezco si me pueden orientar en que estoy haciendo mal, o que no estoy tomando en cuenta

lo que tengo

lo que quiero

table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    td, th {
      border: 1px solid dodgerblue;
      text-align: left;
      padding: 8px;
    }
    th{
        background-color: lightblue;
        text-align:center;
        text-decoration: solid;
    }
    
    tr:nth-child(2n){
        background-color: red;
    }

    div.table{
        margin:20px;
    }
    div{
        margin:5px;
    }```

Para sacar los emojis en windwos 10 se usa la combinación: Tecla Windows + punto

Aplicando algunas pseudo-clases y pseudo-elementos.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        /*Todo*/
        *{
            background-color: #10599e;
            margin: 30px 30px 30px 30px;
        }
        /*Primer Parrafo*/
        p:first-child{
            color: #489e00;
        }
        /*Ultimo Parrafo*/
        p:last-child {
                color: purple;
        }
        /*Un Numero N Del Parrafo*/ /*1st 2nd 3th 4th 5th*/
        p:nth-child(2n){
            color: tomato;
        }
        p:nth-child(3){
            color: white;
        }
        p::first-letter{
            font-size: 50px;
        }
        p:hover{
            color: brown;
            font-size: 60px;
            padding: 5px;
        }
    </style>
    <body>
        <div>
            <p>🐶 Perro</p>
            <p>🐱 gato</p>
            <p>🐭 raton</p>
            <p>🐸 sapo</p>
            <p>🐷 cerdo</p>
            <!--<p>🐥 pollo</p>-->
        </div>
    </body>
</html>

Pseudo elementos

Pseudo clases

Me paso que trabajando en windows, usando visual estudio code, a la hora de usar los pseudo-elemntos tuve problemas con la sintaxis p::first-letter{
}

el cual se resuelve usando la siguiente sintaxis ::first-letter{
…
}
solamente retirando la p, espero que ayude si alguien más tiene este inconveniente.

Para utilizar emojis en Windows pueden usar el comando CTRL + . (Control + punto) y en Linux esta caracteres

Si tienes Windows y quieres colocar emojis dale tecla (Windows + singo punto) y te abrirá una ventana con los emojis

A los pseudo elementos, vamos a llamarlos a través de dos puntos.