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
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
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
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
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
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What are child and descendant combinators in CSS?
CSS combinators are crucial tools for efficient and targeted design. In this article, we will explore in depth two essential combinators: child combinator and descendant combinator. Learning how to use them skillfully will allow you to apply styles more specifically and elegantly on your web pages.
How does the child combinator work?
The child combinator in CSS is used to style elements that are direct children of a container. It uses the > symbol to define that the style will be applied only to elements that are direct children of another. Let's see how to implement it:
<div> <p>I amtext</p> <!-- Styled --> <article> <p>Iamtext</p> <!-- Unstyled --> </article></div><section> <div><div> <p>I ama text</p> <!-- Styled --> </div> <p>Iama text</p> <!-- Unstyled --></section>.The corresponding CSS rule would be:
div > p { color: red;}This code indicates that paragraphs(<p>) that are direct children of a <div> will be styled in red. Note that paragraphs nested within an <article> within a <div> will not be affected.
What about the descendant combinator?
The descendant combiner is more generalized and frequently used in CSS. It selects all elements that are within a specific element, regardless of their nesting level. Here no additional symbol is required between selectors.
div p { color: red;}This style will apply the color red to all <p> paragraphs that are at any nesting level within a <div>. With this method, we are not specific: all descendants are affected, which may or may not be the desired effect.
When to use each combinator?
-
Child combinator (
>): Use this when you need to style only the elements that are immediate and direct children of a container element. This is useful for maintaining control over specific styles where HTML hierarchy is important. -
Descendant combinator (space): Being more general, this combinator is ideal for applying global styles to all elements of a specific type within a container. It is simple, fast, but less precise.
Practical tips for using combinators
-
Knowledge of the DOM: It is essential to understand the structure of the DOM (Document Object Model) to use these combinators effectively. Knowing how your HTML elements are nested will help you choose the right combiner.
-
Avoid redundancies: Avoid overloading your styles by using unnecessary combinators. If a global style is enough, you don't need to use a direct child combiner.
-
Interactive practice: Put into practice what you have learned with interactive resources such as games or exercises that challenge your skills with selectors and combinators. This will not only help you consolidate your knowledge, but will also make learning more enjoyable.
You are now ready to apply these combinators in your CSS projects with confidence. The precision and specificity you achieve in your styles will be key to the efficiency and maintainability of your CSS code. Keep practicing and exploring new ways to improve your web design skills!
Contributions 403
Questions 47
Sort by:
**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>
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 😄
Dejo otro recurso adicional
https://www.w3schools.com/css/css_combinators.asp
- HIJO
( - 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
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;
}
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.
He estado apunto de perder la paciencia
Logre acabar los dos juegos de css
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
aquí un tutorial de como completar el juego https://www.youtube.com/watch?v=ff5-CQuDoow
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
- 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”]
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 😭…que selector tengo que poner para ingresar
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
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?
juego concluido :) muy bueno
<!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;
}
Se logro 😮💨
![]()
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
😃 
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!!!
### ¿Cuándo Usar Cada Combinador?
* **Descendientes (**` `**):** Cuando quieres aplicar estilos a todos los elementos anidados dentro de un contenedor.
* **Hijos Directos (**`>`**):** Cuando solo quieres aplicar estilos a los hijos directos de un elemento.
* **Hermanos Adyacentes (**`+`**):** Cuando quieres aplicar estilos solo al primer hermano adyacente.
* **Hermanos Generales (**`~`**):** Cuando quieres aplicar estilos a todos los hermanos de un elemento.
se logro ;)
Logre completar el CCS Diner y la verdad que me parece excelente aprendí nuevas cosas y esto que hubieron momentos que me estrese por no entender y creí que no lo terminaría, quizá para muchos fue sencillo, pero yo empiezo la verdad en este mundo y terminarlo fue un logro y aprendizaje super increíble
me encanta la forma en la que explica el profe diego
Desde el principio no entiende mucho e incluso me adapté, luego terminé todo.
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
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=“contenedor”>
<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
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=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Lista super</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<h1 class=“lista”>Lista de compras</h1>
<header>
<nav>
<ul class=“main-nav”>
<li class=“main-nav__item”><a href="">Almacen</a>
<figure>
<img src="./pics/almacen.jpg"
alt=“Foto de almacen”>
</figure>
</li>
<li class=“main-nav__item”><a href="">Bebidas</a>
<figure>
<img src="./pics/bebidas.jpg"
alt=“Foto de bebidas”>
</figure>
</li>
<li class=“main-nav__item”><a href="">Frescos</a>
<figure>
<img src="./pics/frescos.jpg"
alt=“Foto de frescos”>
</figure>
</li>
<li class=“main-nav__item”><a href="">Limpieza</a>
<figure>
<img src="./pics/limpieza.jpg"
alt=“Foto de limpieza”>
</figure>
</li>
<li class=“main-nav__item”><a href="">Perfumeria</a>
<figure>
<img src="./pics/perfumeria.jpg"
alt=“Foto 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
Want to see more contributions, questions and answers from the community?