Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Combinadores: Hijo y Descendiente

32/55
Recursos

Aportes 398

Preguntas 47

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Buen juego para practicar selecci贸n de elementos

**RESUMEN **
el operador > solo le herada a quien sea su hijo directo solo a los que realmente son sus hijos
[](
y el operador descendiente es como aquel abuelito que quiere a todos a los nietos,sobrinos a todos pero que esten dentro de ramo familiar

Por si se atascan en alguna pregunta del juego aqu铆 est谩n, las respuestas son
1: plate
2: bento
3: #fancy
4: plate apple
5 #fancy pickle
6 apple.small
7 orange.small
8 bento orange.small
9 plate, bento
10 *
11 plate *
12 plate +apple
13 bento ~ pickle
14 plate > apple
15 orange:first-child
16 plate apple:only-child, plate pickle:only-child
17 plate apple:last-child, pickle:last-child
18 plate:nth-child(3)
19 bento:nth-last-child(3)
20 apple:first-of-type
21 plate:nth-of-type(even)
22 plate:nth-of-type(2n+3)
23 apple:only-of-type
24 apple:last-of-type, orange:last-of-type
25 bento:empty
26 apple:not(.small)
27 [for]
28 plate[for]
29 [for=鈥淰italy鈥漖
30 [for^=鈥淪a鈥漖
31 [for$=鈥渢o鈥漖
32 [for*=鈥渙bb鈥漖

The child combinator (>) se coloca entre dos selectores CSS. Solo coincide con los elementos que coinciden con el segundo selector que son hijos directos de los elementos que coinciden con el primero.
.
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
.
The descendant combinator , t铆picamente representado por un 煤nico car谩cter de espacio ( ), combina dos selectores de modo que los elementos que coinciden con el segundo selector se seleccionan si tienen un elemento antepasado (padre, padre del padre, padre del padre, etc.) que coincida con el primer selector. Los selectores que utilizan un combinador descendiente se denominan selectores descendientes .
.
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
.

Ac谩 les dejo mis notas-c贸digo que me ayud贸 a entender mucho mejor el concepto de combinadores. Resultados:

Con c贸digo index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combinadores</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>Los verdes son los "p" hermanos adjacentes del article</h2>
    <header>
        <article>Soy un article</article>
        <p>Soy un p</p>
        <p>Soy un p</p>
        <article>Soy un article</article>
    </header>
    <br>
    <h2>Los rojos son los "p" hermanos generales del h4</h2>
    <p>Soy un p</p>
    <h4>Soy un h4</h4>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <br>
    <h2>Los azules son los "p" hijos del div</h2>
    <div>
        Soy un div
        <p>Soy un p</p>
        <h5>Soy un h5 
            <p>Soy un p hijo de un h5</p>
        </h5>
        <h6>Soy un h6</h6>
        <p>Soy un p</p>
        <p>Soy un p</p>
    </div>
    <br>
    <h2>Los fucsia son los "p" descendientes del article</h2>
    <article>
        <p>Soy un p</p>
        <h5>Soy un h5
            <p>Soy un p hijo de un h5, pero descendiente a un article</p>
        </h5>
        <p>Soy un p</p>
        <h4>Soy un h4</h4>
    </article>
</body>
</html>

Y c贸digo style.css:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

article + p {
    color: green;
}
h4 ~ p {
    color: red;
}
div > p {
    color: blue;
}
article p {
    color: fuchsia;
}

El combinador descendiente, se representa por un car谩cter de espacio ( ), selecciona elementos que son descendientes del elemento definido. Este combinador selecciona todos los descendientes del elemento (desde elementos secundarios hacia abajo).

div p {
  color:red;
}
<div>
  <p>Mi texto es rojo</p>
  <section>
    <p>Mi texto es rojo</p>
  </section>
</div>

<p>Mi texto no es rojo</p>

El combinador hijo ( > ) se utiliza para seleccionar elementos que son hijos o descendientes directos del elemento especificado.

div > p {
  color:red;
}
<div>
  <p>Mi texto es rojo</p>
  <section>
    <p>Mi texto no es rojo</p>
  </section>
</div>

Para los que quieran saber c贸mo se juega en CSS Diner, en el min 4:41 lo explican. https://www.youtube.com/watch?v=r2rRYsxgUMk

DATO/CONSEJO : si se acostumbran a chusmear en la consola el codigo de las paginas que les gustan, van a aprender bastante.

Mis apuntes de la clase 馃槂


muy recomendado, permite practicas sobre los selectores en css.

When estas estudiando lo que te gusta y te hablan de video juegos

Hola comunidad Platzi, necesito de sus consejos!

Quiero ser toda una pro con CSS pero hasta ahora se me complica, tienen algun consejo o algun video, texto o algo que los haya ayudado a avanzar m谩s con esto y comprenderlo mejor? Intente jugar en el CSS Diner pero no tuve ex铆to 馃槮 Cualquier comentario, ayuda constructiva es bien recibida! Gracias 馃槃

  1. HIJO
    (
  2. DESCENDIENTE
    (

Bueno lo logre. No voy a decir que fue f谩cil porque esos pickle ya me estaban desesperando Pero lo logr茅. Nunca se rindan

He estado apunto de perder la paciencia

Logre acabar los dos juegos de css

Selectores Combinadores

Los selectores se pueden combinar para obtener una especificidad m谩s certera y que se priorice respecto a otras.


Descendientes

Es un selector que nos permite seleccionar a los hijos de un elemento y se representa mediante el car谩cter de espacio ( ``)

Los hijos de un etiqueta HTML son los que se encuentran dentro de dicha etiqueta HTML

<section>
	<article>
		<h3> Gran contenido </h3>
		<p> Conociendo los valores recientes </p>
	</article>
</section>

En el ejemplo:

section: Es padre de article, h3 y p

article: Es padre de h3 y p

h3 y p son hermanos o elementos adyacentes

Ejemplo

<section>
	<article>
		<h3> Gran contenido </h3>
		<p> Conociendo los valores recientes </p>
	</article>
</section>
section article {
	/*
		Sentencias CSS 
	*/
}

Hijo directo

Este selector se usa para poder seleccionar a los hijos inmediatos o directos de una etiqueta padre.

El selector de hijo directo se representa mediante el s铆mbolo > (mayor que)

<section>
	<article>
			<p> Hijo no directo </p>
	</article>

	<p> Hijo directo </p>
</section>

Un hijo directo es aquel elemento HTML que se encuentra inmediato al padre.

Explicaci贸n:

section es el padre de article y p

article es padre de un p

Hijos Directos de section

article, p (Hijo directo)

Ejemplo

<section>
	<article>
			<p> Hijo no directo </p>
	</article>

	<p> Hijo directo </p>
</section>
section > p {
	/*
		Sentencias CSS 
	*/
}

Selector adyacente o selector del pr贸ximo hermano +

Este selector combinador hace uso del s铆mbolo + para su funcionamiento y se encarga de seleccionar al hermano pr贸ximo y a la derecha del elemento HTML seleccionado. (tiene que estar al lado o no aplica los estilos)

Solo selecciona el pr贸ximo elemento a la derecha (uno)

Ejemplo

<h1> Titulo del post </h1>
<p> Contenido </p>
<span> Libre de verdades </span>
<p>Hellouuu papus</p>
h1 + p {
	color: green;
  font-size: 18px;
}

El fragmento CSS generado nos permite seleccionar a todas las etiquetas p que sean hermanos pr贸ximos o est茅n despu茅s de un h1

General de Hermanos ~

Este selector en comparaci贸n a selector de hermano adyacentete permite seleccionar a todos los hermanos o elementos adyacentes (Los elementos adyacentes no necesariamente tienen que estar al costado del elemento para que este selector funcione).

Para su funcionamiento hace uso de la virgulilla ~

Selecciona a todos los elementos adyacentes no solo que pr贸ximo cercano

Ejemplo

<h1> Titulo del post </h1>
<p> Contenido </p>
<span> Libre de verdades </span>
<p>Hellouuu papus</p>
/* Selecciona ambos p y aplica los
estilos mencionados */
h1 ~ p {
	color: green;
  font-size: 18px;
}

馃槃

Para los que no entendieron el Juego como me paso al principio les dejo un resumen:

  1. En el HTML Viewer: se describe exactamente lo que se ve en la imagen, para este ejemplo; Dentro de la Tabla (<div class =鈥渢able鈥>) existen 2 platos (<plate/><plate/>).

  2. En la parte derecha 鈥淭ype Selector鈥 nos ense帽a lo que podemos hacer en CSS, para el ejemplo nos dice que podemos tomar los selectores tipo A los cuales describe como los tags (<div>, <p>, <ul>), para este ejercicio aplicar铆an los tags de <plate/>, as铆 que para pasar este nivel deben escribir; 鈥減late鈥 sin comillas, pues es la forma en que se escriben en CSS.

  3. Solo tienes que colocar en el Edito de CSS los elementos que se est谩n moviendo en la imagen.

  4. Si te equivocas en lo que estas escribiendo, vibrara el Editor de CSS, pero si la equivocaci贸n es parcial 贸sea vas bien, pero hay un error en alg煤n elemento, vibrara en la imagen la parte en la que estas cometiendo el error.

  5. Si lo haces bien autom谩ticamente avanzas de nivel.

Clase 32 - Combinadores: Hijo y descendiente.

驴Qu茅 s铆mbolo debemos de usar para utilizar el combinador child o hijo directo?

  • El s铆mbolo de mayor que (>).

驴C贸mo funciona el combinador child o hijo directo?

  • Este combinador nos permite darle estilos a un elemento que sea hijo directo del elemento que indiquemos en el selector:
  • Sintaxis:
div + p
{
   color: green;
}
  • Como vemos en este ejemplo lo que estamos haciendo es darle estilos a todos los elementos <p> que est茅n 煤nicamente dentro de un elemento <div> y no en otro elemento.

驴Debemos de usar un s铆mbolo para utilizar el combinador descendiente?

  • No, lo que debemos de hacer es separar los elementos por un espacio.

驴C贸mo funciona el combinador descendiente?

  • Este selector nos permite darle estilos a cualquier elemento que est茅 contenido en el elemento que escribamos en el selector, esto sin importar si dicho elemento est谩 dentro de otro.
  • Sintaxis:
div p
{
   color: aqua;
}
  • Como vemos en el ejemplo lo que estamos haciendo es aplicar estilos a todos los elementos <p> que est茅n contenidos en un elemento <div>, sin importar que otros elementos contenga al elemento <p>.

**Hola este es mi aporte. **
HTML Code

CSS Code

Result

Pd. El juego esta incre铆ble. Sin duda tiene que probarlo.

I did it!

Aqu铆 mi humilde aporte

En el juego me vi muy tonto quise empezar a escribir sin leer y sin comprender como funciona, solo debemos poner los selectores que nos piden de las frutas u objetos que se est谩n moviendo en la mesa. Comparto esto por si a alguien tiene un error similar al que tuve y la imagen con el c贸digo resuelto en el nivel que iba como ejemplo de lo que menciono

no entiendo el juego 馃槶鈥ue selector tengo que poner para ingresar

Resumen

Child

Descendant

Juego para practicar.

https://flukeout.github.io/

No se estresen como yo, aqui tengo la solucion pero haganlo o piensen antes de que diga la respuesta

https://www.youtube.com/watch?v=0hkJd9yH_VU

Combinadores: CHILD

  • Selecciona solo lo que sea hijo directo.

div > p{ (aplica estilos a todos los p谩rrafos 鈥榩鈥 que sean hijo directo de 鈥榙iv鈥

}

<div>
	<section>
		<p>soy un p</p>
	</section>
	<section>
		<p>soy un p</p>
	</section>
	<div>
		<p>Soy un p</p> **ESTE ES EL HIJO DIRECTO**
	</div>
</div>

Combinadores: DESCENDANT

  • Aplicara estilos a todos los elementos que formen parte del selector padre.
div p{
}
  • Es este ejemplo decimos que todos los elementos p que est谩n dentro de un div se aplicaran estilos.
<div>
		<section>
			**<p>soy un p</p>**
		</section>
		<section>
			**<p>soy un p</p>**
		</section>
		<div>
			**<p>Soy un p</p>**
		</div>
		<article>
			**<p>soy una etiqueta p</p>**
		</article>
	</div>
  • Como se muestra se aplicara a todos los p que se encuentren dentro de div.

Bastante entretenido 馃槂

Done

Estudiar nunca fue tan divertido.

Buen铆simo el desaf铆o

Muy buen ejercicio, aprend铆 adem谩s muchas cosas que no sabia y gusto mucho la verdad
.
.

.
.

y d贸nde est谩 el juego?

<!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="stylesheet" href="../css/combinadores.css">
    <title>Combinadores</title>
</head>
<body>
    <main>
    <div class="adjacent-sibling">
        <h1>Libros</h1>
        <h2>La acci贸n Humana</h2>
        <p>Ludwind Von Mises</p>
        <h2>Liberalismo</h2>
        <h2>La Rebeli贸n de Atlas</h2>
        <p>Ayn Rand</p>
        <h3>La fatal arrogancia</h3>
        <p>Friedrich Hayek</p>
        <span id="combinators">Adjacent-sibling</span>
    </div>

    <div class="general-sibling">
        <h1>Series</h1>
        <h2>La casa de papel</h2>
        <p>Temporada 3</p>
        <h2>Stranger Things</h2>
        <p>Temporada 2</p>
        <h3>You</h3>
        <p>Temporada 2</p>
        <p>Horas vistas 457,4 mill</p>
        <span id="combinators">General-sibling</span>
    </div>
    <div class="child">
        <h1>Premios Nobel</h1>
        <article>
            <p>Premio Nobel de F铆sica</p>
        </article>
        <article>
            <p>Premio Nobel de Qu铆mica</p>
        </article>
        <article>
            <p>Premio Nobel de Medicina</p>
        </article>
        <article>
            <p>Premio Nobel de la Paz</p>
        </article>
        <article>
            <p>Premio Turing(Computaci贸n)</p>
        </article>
        <article>
            <p>Premio Abel(Matem谩ticas)</p>
        </article>

        <p>Premio Nobel de Literatura</p>
        <p>Leer m谩s...</p>
        <span id="combinators">Child</span>
    </div>
    <div class="descendant">
        <h1>Empresas IT</h1>
        <article>
            <p>Apple Inc.</p>
            <span>$ 2,431 bill</span>
        </article>
        <article>
            <p>Microsoft</p>
            <span>$ 1920 bill</span>
        </article>
        <div>
            <p>Amazon Inc.</p>
            <span>$ 1155 bill</span>
        </div>
        <p>Meta platforms Inc.</p>
        <span>$ 446 mill</span>
        <span id="combinators">Descendant</span>
    </div>
</main>
</body>
</html>
body{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
main{
    display: flex;
    justify-content: center;
}

.adjacent-sibling h2 + p{
    color:red;
}
.adjacent-sibling{
    background-color:#FFB100;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}

.general-sibling h2 ~ p{
    color: blue;
}
.general-sibling{
    background-color:#FBC252;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
.child > p{
    color:darkgreen;
}
.child{
    background-color:#F0ECCF;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
.descendant p{
    color:darkviolet;
}
.descendant {
    background-color:#A3BB98;
    padding: 12px;
    border-radius: 8px;
    margin: 12px;
}
#combinators{
    display: flex;
    justify-content:right;
    color:rgb(78, 6, 6);
    font-weight: bold;
}

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • div > p = esto se lee as铆. A la etiqueta p que sea hija del contenedor div apl铆quele lo siguiente

  • Cuando no encontramos ning煤n signo entre el contenedor y la etiqueta significa que funcionara como descendiente

RESPUESTAS CSS DINER

  1. plate
  2. bento
  3. #fancy
  4. plate apple
  5. #fancy pickle
  6. apple.small
  7. orange.small
  8. bento orange.small
  9. plate, bento
  10. plate *
  11. plate +apple
  12. bento ~ pickle
  13. plate > apple
  14. orange:first-child
  15. plate apple:only-child, plate pickle:only-child
  16. plate apple:last-child, pickle:last-child
  17. plate:nth-child(3)
  18. bento:nth-last-child(3)
  19. apple:first-of-type
  20. plate:nth-of-type(even)
  21. palte:nth-of-type(2n+3)
  22. apple:only-of-type
  23. .small:last-of-type
  24. bento:empty
  25. apple:not(.small)
  26. [for]
  27. plate[for]
  28. bento[for=鈥淰italy鈥漖
  29. [for^=鈥淪a鈥漖
  30. [for$=鈥渢o鈥漖
  31. bento[for*=鈥渙鈥漖

Se logro 馃槷鈥嶐煉

![]()

En un principio no supe que hacer, una vez que entiendes el primer nivel,los demas son muy faciles.
No tienen que poner el valor, literalmente solamente el nombre de la etiqueta a elegir.

Logrado!

Ese juego lo hab铆a jugado hace tiempito y si, al inicio era un poco desesperante con varios niveles. xD q recuerdos 鈥 pero, si logr茅 llegar terminarlo

馃槂 ![](

aqu铆 un tutorial de como completar el juego https://www.youtube.com/watch?v=ff5-CQuDoow

Es todo un reto.

Genial! pero mucho por practicar y aprender todav铆a.

Yo tambi茅n lo consegu铆, fue algo dif铆cil, muchos combinadores o selectores diferentes. Gran juego 馃槂

No es que sea dif铆cil el juego, sino que hay resto de vainas que ni se ense帽an en este curso jajajaja

Ejercicio propuesto en el juego
(Select the small oranges)

/******** COMBINADORES *********/

/*--------------Hermano cercano------------------*/
/* En este caso aplica las reglas a todas las etiquetas p
que est茅n junto a una etiqueta h2*/
h2 + p{
	color: red;
}


/*------------Hermano general------------------*/
/*En este caso aplica las reglas a todas las etiquetas h6
que est茅n al mismo nivel de un h4*/
h4 ~ h6{
	font-size: 20px;
	color: blue;
}

/*----------------Hijo-----------------------*/
/*En este caso, se aplican las reglas a la etiqueta p 
que sea hija directa de la etiqueta article*/
article > p{
	background: yellow;
}


/*------------Descendiente----------------*/
/*En este caso, se aplican las reglas a las etiquetas p
que desciendan de una etiqueta section*/
section p{
	background: green;
}

Sufri la 27.

muy recomendado al final un poco complicado pero lo logre

div >p (se lee: la etiqueta p谩rrafo sea hija directa de un div padre).
div p (se lee: todas las etiquetas p谩rrafo que est茅n dentro de un contenedor de clase div)

Recomiendo esta p谩gina aqu铆

Algunos niveles me buggearon pero ah铆 vamos. Un abrazo gente.

Que buenos temas que estas explicando, pero el juego no entend铆 que hay que hacer鈥 馃槮!! Pero voy a seguir intentando hasta entenderlo.

Hola a todos, estuve haciendo pruebas combinadores y note que se le da prioridad a unos sobre otros. dispuestos en un orden de importancia son:
1)Combinador Descendiente.
2)Combinador Hijo.
3)Combinador Hermano General.
4)Combinador Hermano Adyacente.
De igual forma les comparto el c贸digo con el que hice las pruebas que me dieron este resultado, por si lo quieren examinar.

/* Ejemplo de combinador Hemano Adyacente
h2 + p{
    color:indigo;
}*/
/* Ejemplo de Combinador Hermano General
h2 ~ p{
    color: red;
}*/
/*Ejemplo ce combinador Hijo
div > p{
    color: green;
}*/

/*Ejemplo de combinador Decendiente*/
div p{
    color: indianred;
}

Se me dificulto al principio, pero la pena esforzarse , hice todo lo posible por acabarlo
y ahora ya entiendo super bien este tema, gracias.

What鈥檚 up bro 馃槂


Admito que me costo como una hora


f谩cil y sencillo

Estuvo Genial el Juego!! 馃挌

gracias por le juego. Es una excelente manera de ir cogiendo practica.

I did it!!!

![](https://static.platzi.com/media/user_upload/image-752aa504-e280-4db8-abe0-59d9f84f77f2.jpg) Desde el principio no entiende mucho e incluso me adapt茅, luego termin茅 todo.
![](https://static.platzi.com/media/user_upload/image-c28a6ad1-c8f5-4435-b250-fab31a5dd350.jpg) me cost贸 un poco en unos dos niveles pero lo logre gran modo de practicar esto la verdad!!

Hijo y Descendiente

Los Combinadores

.com-herm-adya h2 + p {
    color: red;
    font-weight: 600;
    font-size: 20px;
}
/* Utilizando la combinaci贸n de teclas Alt + 126 se obtiene el s铆mbolo (~) */
.com-herm-gen h2 ~ p {
    color: purple;
    font-weight: 600;
    font-size: 20px;
}

.com-hijo div > p {
    color: rgb(174, 0, 255);
    font-weight: 600;
    font-size: 20px;
}

.com-desc p {
    color: orange;
    font-weight: 600;
    font-size: 20px;
}
```css ```
Me parece importante mencionar que los espacios en el selector pueden marcar la diferencia, juzguen ustedes mismos =D ![](https://static.platzi.com/media/user_upload/Pasted%20image%2020240120194814-12e2ebbe-ffa5-44fa-aa7d-2633bfd80aa1.jpg) ![](https://static.platzi.com/media/user_upload/Pasted%20image%2020240120194836-b342b957-fe64-45fc-b3f8-6516eda48336.jpg)
![](https://static.platzi.com/media/user_upload/imagen-0e51ac21-9810-4524-910e-8b06025eb271.jpg)

En esta clase, exploraremos los combinadores child y descendiente en CSS, que nos permiten seleccionar elementos de manera m谩s espec铆fica. Veamos un ejemplo pr谩ctico para comprender su aplicaci贸n.

Estructura HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Combinadores Child y Descendiente</title>
</head>
<body>
	<div>
		<article>
			<p>Soy un texto</p>
		</article>
		<section>
			<div>
				<p>Soy un texto</p>
			</div>
			<p>Soy un texto</p>
		</section>
	</div>
</body>
</html>

Estilos CSS con el Combinador Child:

/* Estilo para la etiqueta p谩rrafo que sea hija directa de una etiqueta div */
div > p {
	color: red;
}

Estilos CSS con el Combinador Descendiente:

/* Estilo para todas las etiquetas p谩rrafo que est茅n dentro de una etiqueta div */
div p {
	color: red;
}

Explicaci贸n:

Combinador Child (div > p):

En este caso, estamos aplicando un estilo espec铆ficamente a la etiqueta p谩rrafo (p) que es hija directa de la etiqueta div. La regla div > p selecciona la etiqueta p谩rrafo que es descendiente inmediata de la etiqueta div.

Combinador Descendiente (div p):

Aqu铆, el estilo se aplica a todas las etiquetas p谩rrafo (p) que est谩n dentro de la etiqueta div, independientemente de su nivel de anidaci贸n. Es decir, afecta a todos los p谩rrafos descendientes de la etiqueta div.

En el resultado, observamos que las etiquetas de p谩rrafo han adquirido el color rojo seg煤n las reglas definidas para los combinadores child y descendiente.

Conclusi贸n:

Los combinadores child y descendiente nos brindan flexibilidad al seleccionar elementos de manera m谩s precisa en CSS. Al comprender su uso, podemos aplicar estilos de manera efectiva a elementos espec铆ficos en funci贸n de su relaci贸n con otros elementos dentro del documento HTML.

Recuerda que utilizar estos combinadores adecuadamente te permitir谩 escribir reglas CSS m谩s espec铆ficas y evitar aplicar estilos no deseados a otros elementos. 隆Explora estos conceptos y contin煤a mejorando tus habilidades en CSS! Nos vemos en la siguiente clase.

En CSS, los combinadores de hijo (>) y descendiente (espacio en blanco) son importantes para especificar la relaci贸n entre elementos y aplicar estilos de manera selectiva. Aqu铆 te explico ambos:

Combinador de Hijo (>):
El combinador de hijo selecciona todos los elementos que son hijos directos de un elemento especificado.

css
Copy code
ul > li {
/* Estilos para elementos <li> que son hijos directos de <ul> */
list-style-type: square;
}
En este ejemplo, se aplicar谩n estilos a todos los elementos <li> que son hijos directos de un elemento <ul>.

Combinador de Descendiente (espacio en blanco):
El combinador de descendiente selecciona todos los elementos descendientes de un elemento especificado, ya sea directo o indirecto.

css
Copy code
article p {
/* Estilos para todos los elementos <p> que son descendientes de <article> */
color: #333;
}
En este ejemplo, se aplicar谩n estilos a todos los elementos <p> que son descendientes (directos o indirectos) de un elemento <article>.

Diferencia clave:
Combinador de Hijo (>): Selecciona solo los elementos que son hijos directos del elemento especificado.

css
Copy code
padre > hijo {
/* Estilos aplicados solo a los hijos directos */
}
Combinador de Descendiente (espacio en blanco): Selecciona todos los elementos descendientes del elemento especificado, ya sea directo o indirecto.

css
Copy code
antecesor descendiente {
/* Estilos aplicados a todos los descendientes, directos o indirectos */
}
Ejemplo HTML:

html
Copy code
<div id=鈥渃ontenedor鈥>
<ul>
<li>Elemento 1</li>
<li>Elemento 2
<ul>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
</ul>
</li>
<li>Elemento 3</li>
</ul>
<article>
<p>P谩rrafo 1</p>
<p>P谩rrafo 2</p>
</article>
</div>
Ejemplo CSS:

css
Copy code
#contenedor > ul > li {
/* Estilos para los elementos <li> que son hijos directos de <ul> que es hijo directo de #contenedor */
color: blue;
}

#contenedor article p {
/* Estilos para todos los elementos <p> que son descendientes de <article> que es hijo directo de #contenedor */
color: green;
}
En este ejemplo, se aplicar谩n estilos a los elementos <li> que son hijos directos de <ul> y son, a su vez, hijos directos de #contenedor. Tambi茅n se aplicar谩n estilos a los elementos <p> que son descendientes de <article> y son, a su vez, hijos directos de #contenedor.

Me sirvi贸 colocarle contenido super descriptivo a las etiquetas para poder entender esto de los combinadores. Nice! :D ![](https://static.platzi.com/media/user_upload/Screenshot%202023-10-24%20161201-103130d2-0d9b-4bd3-9aeb-ec09a8df6747.jpg)
![](https://static.platzi.com/media/user_upload/css-404ccf83-393f-4fb7-a6fe-77d99b5bdfb8.jpg) I rock at CSS!!

Agreg茅 algunas cosas a mi p谩gina de lista de supermercado. Principalmente la estructur茅 como una tabla con dropdowns para seleccionar los productos.

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Lista super</title>
<link rel=鈥渟tylesheet鈥 href="./style.css">
</head>
<body>
<h1 class=鈥渓ista鈥>Lista de compras</h1>
<header>
<nav>
<ul class=鈥渕ain-nav鈥>
<li class=鈥渕ain-nav__item鈥><a href="">Almacen</a>
<figure>
<img src="./pics/almacen.jpg"
alt=鈥淔oto de almacen鈥>
</figure>
</li>
<li class=鈥渕ain-nav__item鈥><a href="">Bebidas</a>
<figure>
<img src="./pics/bebidas.jpg"
alt=鈥淔oto de bebidas鈥>
</figure>
</li>
<li class=鈥渕ain-nav__item鈥><a href="">Frescos</a>
<figure>
<img src="./pics/frescos.jpg"
alt=鈥淔oto de frescos鈥>
</figure>
</li>
<li class=鈥渕ain-nav__item鈥><a href="">Limpieza</a>
<figure>
<img src="./pics/limpieza.jpg"
alt=鈥淔oto de limpieza鈥>
</figure>
</li>
<li class=鈥渕ain-nav__item鈥><a href="">Perfumeria</a>
<figure>
<img src="./pics/perfumeria.jpg"
alt=鈥淔oto de perfumeria鈥>
</figure>
</li>
</ul>

        <ul class="menu1">
            <li class="menu1__item"><a href="">Aderezos</a></li>
            <input list="aderezos" placeholder="Seleccione..."/>
            <datalist id="aderezos" class="ade">
                <option value="mayonesa"></option>
                <option value="mostaza"></option>
            </datalist>

            <li class="menu1__item"><a href="">Mermelada</a></li>
            <input list="mermeladas" placeholder="Seleccione..."/>
            <datalist id="mermeladas">
                <option value="mermelada de frutilla"></option>
                <option value="mermelada de durazno馃嵂"></option>
                <option value="mermelada de ciruela"></option>
                <option value="mermelada de naranja"></option>
            </datalist>

            <li class="menu1__item"><a href="">Panaderia</a></li>
            <input list="panaderia" placeholder="Seleccione..."/>
            <datalist id="panaderia">
                <option value="tostadas integrales"></option>
                <option value="pan integral馃崬"></option>
                <option value="vainillas"></option>
                <option value="grisines"></option>
            </datalist>

            <li class="menu1__item"><a href="">Infusiones</a></li>
            <input list="infusiones" placeholder="Seleccione..."/>
            <datalist id="infusiones">
                <option value="mate cocido"></option>
                <option value="te"></option>
                <option value="cafe鈽"></option>
            </datalist>

            <li class="menu1__item"><a href="">Harinas</a></li>
            <input list="harinas" placeholder="Selecciones..."/>
            <datalist id="harinas">
                <option value="harina de maiz"></option>
                <option value="harina de trigo"></option>
            </datalist>

            <li class="menu1__item"><a href="">Legumbres</a></li>
            <input list="legumbres" placeholder="Seleccione..."/>
            <datalist id="legumbres">
                <option value="arroz"></option>
                <option value="choclo cremoso"></option>
                <option value="choclo entero馃カ"></option>
                <option value="lentejas"></option>
            </datalist>
        </ul>
        
        <ul class="menu2">
            <li class="menu2__item"><a href="">Bebidas sin alcohol</a></li>
            <input list="sin alcohol" placeholder="Seleccione..."/>
            <datalist id="sin alcohol">
                <option value="agua sin gas"></option>
                <option value="agua saborizada"></option>
                <option value="gaseosa"></option>
                <option value="agua gasificada"></option>
                <option value="jugo"></option>
            </datalist>

            <li class="menu2__item"><a href="">Bebidas con alcohol</a></li>
            <input list="con alcohol" placeholder="Seleccione:"/>
            <datalist id="con alcohol">
                <option value="amargo"></option>
                <option value="cerveza"></option>
            </datalist>
        </ul>
        
        <ul class="menu3">
            <li class="menu3__item"><a href="">Lacteos</a></li>
            <input list="lacteos" placeholder="Seleccione..."/>
            <datalist id="lacteos">
                <option value="leche descremada馃"></option>
                <option value="leche entera"></option>
                <option value="yogurt descremado"></option>
                <option value="yogurt entero"></option>
                <option value="manteca"></option>
                <option value="margarina"></option>
                <option value="crema de leche"></option>
            </datalist>

            <li class="menu3__item"><a href="">Pastas frescas y tapas</a></li>
            <input list="pastas y tapas" placeholder="Seleccione..."/>
            <datalist id="pastas y tapas">
                <option value="tapas para empanadas hojaldre馃"></option>
                <option value="tapas para empanadas criolla馃"></option>
                <option value="tapas para tarta hojaldre"></option>
                <option value="tapas para tarta criolla"></option>
                <option value="ravioles"></option>
                <option value="sorrentinos"></option>
            </datalist>

            <li class="menu3__item"><a href="">Quesos</a></li>
            <input list="quesos" placeholder="Seleccione..."/>
            <datalist id="quesos">
                <option value="queso untable"></option>
                <option value="queso para rallar馃"></option>
                <option value="queso mantecoso"></option>
            </datalist>

            <li class="menu3__item"><a href="">Frutas y verduras</a></li>
            <input list="frutas y verduras" placeholder="Seleccione..."/>
            <datalist id="frutas y verduras">
                <option value="lim贸n馃崑"></option>
                <option value="manzana馃崕"></option>
                <option value="naranja"></option>
                <option value="frutillas"></option>
                <option value="cebolla"></option>
                <option value="papas blancas馃"></option>
                <option value="papas negras"></option>
            </datalist>

            <li class="menu3__item"><a href="">Huevos</a></li>
            <input list="huevos" placeholder="Seleccione..."/>
            <datalist id="huevos">
                <option value="huevos blancos"></option>
                <option value="huevos de color"></option>
            </datalist>
        </ul>

        <ul class="menu4">
            <li class="menu4__item"><a href="">Lavado</a></li>
            <input list="lavado" placeholder="Seleccione..."/>
            <datalist id="lavado">
                <option value="jab贸n l铆quido para lavarropas"></option>
                <option value="jab贸n en polvo"></option>
                <option value="suavizante"></option>
                <option value="detergente ropa fina"></option>
            </datalist>

            <li class="menu4__item"><a href="">Papeles</a></li>
            <input list="papeles" placeholder="Seleccione..."/>
            <datalist id="papeles">
                <option value="papel higi茅nico馃Щ"></option>
                <option value="rollo de cocina"></option>
                <option value="servilletas"></option>
            </datalist>

            <li class="menu4__item"><a href="">Limpieza de ba帽o</a></li>
            <input list="limpieza ba帽o" placeholder="Seleccione..."/>
            <datalist id="limpieza ba帽o">
                <option value="limpiador para ba帽o"></option>
                <option value="desodorante de ambiente"></option>
                <option value="desodorante para ba帽o"></option>
                <option value="trapo para piso"></option>
                <option value="escobita para ba帽o"></option>
            </datalist>

            <li class="menu4__item"><a href="">Limpieza de cocina</a></li>
            <input list="limpieza cocina" placeholder="Seleccione..."/>
            <datalist id="limpieza cocina">
                <option value="detergente"></option>
                <option value="antigrasa"></option>
                <option value="esponja馃Ы"></option>
                <option value="detergente para lavavajillas"></option>
                <option value="rejilla"></option>
            </datalist>

            <li class="menu4__item"><a href="">Limpieza de pisos</a></li>
            <input list="limpieza pisos" placeholder="Seleccione..."/>
            <datalist id="limpieza pisos">
                <option value="autobrillo"></option>
                <option value="cera para madera"></option>
                <option value="trapo para pisos"></option>
                <option value="escoba"></option>
                <option value="escobill贸n"></option>
                <option value="secador"></option>
            </datalist>

            <li class="menu4__item"><a href="">Lavandina</a></li>
            <input list="lavandina" placeholder="Seleccione..."/>
            <datalist id="lavandina">
                <option value="lavandina l铆quida"></option>
                <option value="lavandina en gel"></option>
            </datalist>

        </ul>

        <ul class="menu5">
            <li class="menu5__item"><a href="">Cuidado del cabello</a></li>
            <input list="cuidado del cabello" placeholder="Seleccione..."/>
            <datalist id="cuidado del cabello">
                <option value="shampoo"></option>
                <option value="acondicionador"></option>
                <option value="cema para peinar"></option>
            </datalist>

            <li class="menu5__item"><a href="">Cuidado bucal</a></li>
            <input list="cuidado bucal" placeholder="Seleccione..."/>
            <datalist id="cuidado bucal">
                <option value="pasta dental"></option>
                <option value="hilo dental"></option>
                <option value="cepillo dental馃Ψ"></option>
            </datalist>

            <li class="menu5__item"><a href="">Cuidado personal</a></li>
            <input list="personal" placeholder="Seleccione..."/>
            <datalist id="personal">
                <option value="jab贸n de tocador"></option>
                <option value="jab贸n liquido para manos"></option>
                <option value="crema facial"></option>
                <option value="crema corporal"></option>
                <option value="algod贸n"></option>
                <option value="toallas femeninas"></option>
            </datalist>

        </ul>
    </nav>
</header>

</body>
</html>

Al principio no le entendia, pero lo logre鈥

El juego estuvo genial.

Me ha costado pero lo logr茅!!

Combinadores: Hijo y Descendiente

hijo directo:

El estilo se le aplica al hijo directo de un padre, si por ejemplo un p est谩 dentro de un div se aplica, pero si ese p dentro del div tambi茅n est谩 dentro de un article no se aplica porque no es directo.

div > p {
	color: green;
}

Descendiente:

El estilo se aplica a todos los elementos hijos aunque est茅n dentro de otro elemento, es el m谩s com煤n de usar.

div p {
	color green;
}

.

Genial juego


Me pareci贸 una excelente forma de poner en pr谩ctica todo lo visto! An铆mense a intentarlo 馃槈

Me tomo un buen rato

A diferencia del descendente que modifica todos los hijos aunque no sean directos

Hijos o child: div > p {(modifica los p谩rrafos que sean hijos directos de un Div) O como s铆 solo heredara a su primog茅nito.