Combinadores CSS: Hijos y Descendientes

Buen juego para practicar selección de elementos

Efraín Hernández García

Si, buenísimo!

Sebastian Cifuentes

Si, esta bueno

Cristobal Nyram

**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

Andrés Felipe Lopez gomez

Muchas gracia

Carlos Valencia

Muy buena forma de expresarlo.

Yeferson Andrés Quevedo Gutiérrez

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"]

Luis Angel Olivárez Estrada

Estaba atorado en el nivel 8. ¿Cuál es la diferencia de poner esto? bento orange.small

Yo estaba poniendo esto y me salía error: bento orange .small

¿Hay diferencia de ponerlo junto o separado? No entiendo. ¿A caso las etiquetas que se cierran en una misma funcionan distinto?

David Chaves Alpizar

Gracias, fue de mucha ayuda

Yeisson Stik Gutierrez Rivera

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 .

Andrés Felipe Lopez gomez

Muchas gracias

Kristhian Medina

Gracias

Sebastián Pineda Ospina

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>
    <h3>Los verdes son los "p" hermanos adjacentes del article</h3>
    <header>
        <article>Soy un article</article>
        <p>Soy un p</p>
        <p>Soy un p</p>
        <article>Soy un article</article>
    </header>
    <br>
    <h3>Los rojos son los "p" hermanos generales del h4</h3>
    <p>Soy un p</p>
    <h5>Soy un h4</h5>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <p>Soy un p</p>
    <br>
    <h3>Los azules son los "p" hijos del div</h3>
    <div>
        Soy un div
        <p>Soy un p</p>
        <h6>Soy un h5 
            <p>Soy un p hijo de un h5</p>
        </h6>
        <h6>Soy un h6</h6>
        <p>Soy un p</p>
        <p>Soy un p</p>
    </div>
    <br>
    <h3>Los fucsia son los "p" descendientes del article</h3>
    <article>
        <p>Soy un p</p>
        <h6>Soy un h5
            <p>Soy un p hijo de un h5, pero descendiente a un article</p>
        </h6>
        <p>Soy un p</p>
        <h5>Soy un h4</h5>
    </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;
}

Kenyi Julberht Hancco Quispe

Excelente!

Emanuel Alvarez

Muy buen aporte! Me ayudó a ordenar mis ideas.

Iván Arcos

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>

Sarley Durango

Gracias por el dato investigativo

Jimmy Buriticá Londoño

Buen resumen

Eugenio Condori

rodrigo roque

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

Laidon Manolo Ayala Dominguez

:-P ok jjj

Ricardo Mazuera

Buen dato y muy sabio consejo.

Jazmín Lizette Sánchez Neira

Mis apuntes de la clase :)

ANDRES FELIPE ARCILA GOMEZ

Yo viniendo a los comentarios a buscar tus apuntes jajajaja. Muchas gracias <3

Eric López

Hace 3 años

Gracias por tu aporte...

Sergio Augusto Chavarri Cabello

muy recomendado, permite practicas sobre los selectores en css.

Joaquín A. Izaguirre G.

Thank you Sergio

Jose Antonio Rojas Ollarves

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

Diego Alejandro Moreno Pedroza

Jajaja tal cual

María Del Pilar Chávez Gutiérrez

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 :D

Diego Perdomo

¡Hola María! También voy empezando. Te recomiendo revisar los casos que no puedas entender en específico, es decir, 1x1.

Puedes comenzar una lista para que vayas aclarando cada uno de forma individual. Es importante comenzar desde lo más general.

¿Cuáles son los temas que más se te complican? Tal vez alguien nos puede ayudar por aquí, si yo puedo también te explico.

Con el CSS diner, también tuve problemas al principio, lo que me ayudo mucho fue leer y aplicar las indicaciones de la derecha.

Henry Alexander Velásquez Rosas

Me llevas 9 meses de ventaja, como vas? Vi tus aportes de hace 4 meses 😅

Maria del Rosario Castro

Dejo otro recurso adicional https://www.w3schools.com/css/css_combinators.asp[](url)

Sarley Durango

Si, este sitio lo utilizo mucho para aprender

Alex Romero

Buen aporte!

Cristian Antezana Novillo

como se juega no le entendi ayuda

Héctor Jaazhiel López Tisnado

Hasta arriba te dice que debes seleccionar, a la derecha te explican que selector puedes usar, a la izquierda abajo tienes el editor CSS, ahí pones solo el selector y das enter, si te sale bien selecciona los elementos que te esta pidiendo arriba. Ojo los elementos no son <p>,<a>, aqui usan apple, plate, etc.

Yimmy Cruz

Yo tampoco lo entendí a la primera. Es divertido solo tienes que completar el código CSS de acuerdo al código HTML de la parte derecha, obedeciendo lo que te pida en la parte superior que es mas muestra una imagen animada para que sea aun mas divertido.

LUZBY NADYN CUSACANI VENTURA

HIJO (
DESCENDIENTE (

Paula Uzcategui Leon

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

Davis Bremdow Salazar Roa

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>
		<h4> Gran contenido </h4>
		<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>
		<h4> Gran contenido </h4>
		<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

<h2> Titulo del post </h2>
<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

<h2> Titulo del post </h2>
<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;
}

William Gonzalez Betancourt

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.

Ines Valeria Foglino

Muy bueno el juego!!!!... me sirvió tu ayudita para arrancar...mil gracias!!

Delaney David Sarmiento Hernández

He estado apunto de perder la paciencia

Julio Cesar Quintero González

alguien me explica cómo van los atributos???🤡 es que aún no en encuentro ninguna documentación o ningún video donde lo expliquen

Andrés Serafin Rene Jerez Camargo

Recuerda que los atributos van dentro de la etiqueta de apertura del elemento, pueden o no tener valor. Ejemplo un input cuyo atributo tipo sea checkbox

<input type="checkbox">

Ahora en css podemos modificar elementos de acuerdo a esos atributos. Con el selector [] donde colocamos el nombre del atributo, o nombre y valor.

[type] selecciona todos los elementos que tengan el atributo type
[type="checkbox"] selecciona los elementos que tengan el atribuyo type cuyo valor sea checkbox

Si no se quiere especificar el valor exacto, sino especificar unos caracteres iniciales, finales o intermedios, se usa ^,$,* respectivamente.

[type^= "ch"]
[type$= "box"]
[type*= "ck"]

EDWIN VASQUEZ VALLE

Rayos, debo aprender mas no di con el juego.

Luis Alejandro Ortega Bermudez

Puede llegar ser estresante , yo era de esos que decía que el css no era lo mio , pero me sorprendo lo fácil que se me da jajaja así que #NuncaParesDeAprender

EDWIN VASQUEZ VALLE