Buen juego para practicar selección de elementos
Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Combinadores: Hijo y Descendiente
32/55Recursos
Aportes 382
Preguntas 47
Ordenar por:
**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=“Vitaly”]
30 [for^=“Sa”]
31 [for$=“to”]
32 [for*=“obb”]
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.
muy recomendado, permite practicas sobre los selectores en css.
Mis apuntes de la clase 😃
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 😄
Dejo otro recurso adicional
https://www.w3schools.com/css/css_combinators.asp
- HIJO
( - DESCENDIENTE
(
When estas estudiando lo que te gusta y te hablan de video juegos
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
Para los que no entendieron el Juego como me paso al principio les dejo un resumen:
-
En el HTML Viewer: se describe exactamente lo que se ve en la imagen, para este ejemplo; Dentro de la Tabla (<div class =“table”>) existen 2 platos (<plate/><plate/>).
-
En la parte derecha “Type 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; “plate” sin comillas, pues es la forma en que se escriben en CSS.
-
Solo tienes que colocar en el Edito de CSS los elementos que se están moviendo en la imagen.
-
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.
-
Si lo haces bien automáticamente avanzas de nivel.
**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
no entiendo el juego 😭…que selector tengo que poner para ingresar
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 HTMLson 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
pque sean hermanos próximos o estén después de unh1
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;
}
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
Resumen
Child
Descendant
Juego para practicar.
https://www.youtube.com/watch?v=4JrfQY5sgfU
Combinadores - Teoría
No se estresen como yo, aqui tengo la solucion pero haganlo o piensen antes de que diga la respuesta
Logre acabar los dos juegos de css
Combinadores: CHILD
- Selecciona solo lo que sea hijo directo.
div > p{ (aplica estilos a todos los párrafos ‘p’ que sean hijo directo de ‘div’
}
<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?
RESPUESTAS CSS DINER
- plate
- bento
- #fancy
- plate apple
- #fancy pickle
- apple.small
- orange.small
- bento orange.small
- plate, bento
-
- plate *
- plate +apple
- bento ~ pickle
- plate > apple
- orange:first-child
- plate apple:only-child, plate pickle:only-child
- plate apple:last-child, pickle:last-child
- plate:nth-child(3)
- bento:nth-last-child(3)
- apple:first-of-type
- plate:nth-of-type(even)
- palte:nth-of-type(2n+3)
- apple:only-of-type
- .small:last-of-type
- bento:empty
- apple:not(.small)
- [for]
- plate[for]
- bento[for=“Vitaly”]
- [for^=“Sa”]
- [for$=“to”]
- bento[for*=“o”]
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!
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>.
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’s 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!!!
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;
}
<!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;
}
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.
Hijos (child) y Descendientes (descendant)
muy buena forma de practicar
Por nada del mundo pasen por alto este juego amigos se aprende muchisimo enseriooo…
me gustó mucho el ejercicio, es muy complejo y bueno
Me tomo una hora; pero lo logre 😃
Mi aporte sería, además del uso que se explica en el video sobre los combinadores, en VS Code tiene instalada una extension llamada Emmet y podemos usar los combinadores para crear código de forma más rapida por ejempo:
ul>il.main-nav__item*3
creará al dar Enter
<ul>
<il class="main-nav__item"></il>
<il class="main-nav__item"></il>
<il class="main-nav__item"></il>
</ul>
mas referencias en la página Visual Studio Code: Emmet
Combinador Hijo
/* La etiqueta parrafo que sea hija directa de una etiqueta div, a esa etiqueta p agregale los sig estilos*/
div > p /* Combinador Hijo*/
{
color: red;
}
Combinador Descendiente
/Toda etiqueta p dentro de un div aplicar sig estilo /
div p / Combinador descendiente/
{
color: red;
}
Resumen de selectores:
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors
El juego no funciona para las personas que tienen el navegador Brave, hay que hacerlo en Chrome o en Edge
el enlace del juego no sirve 😦
El ejercicio esta buenisimo, super recomendado que hagas los ejercicios aunque te tome tiempo, entre mas práctica mejor
super bueno el juego, se refuerza todo lo visto
Muy bueno el juego jajaja, te frustra al principio pero luego se entiende bien
Logré completar los niveles del juego.
Sirve para practicar todo lo visto en selectores hasta el momento
Realmente me puso a pensar!
No entiendo nada de lo q hay q hacer en el juego xd
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.