Tipos de selectores: básicos y combinadores

Selectores combinadores

Ahora que ya entendemos los selectores básicos, vienen los combinadores, que realmente nos ayudan a ser muchos más específicos 👀.
.

1. Descendientes: En este selector, el que está más a la izquierda es el selector padre y los que están a su derecha serán los selectores hijos, por ejemplo:
   .
   

   
   .
   En este selector, el div es el padre y el .rojito es el hijo. ¿Esto qué significa? Básicamente que este selector va a agarrar cualquier elemento que tenga la clase “rojito”, pero este elemento tiene que estar DENTRO de un div. O sea, si encuentra algún elemento que tenga la clase .rojito, pero este elemento NO está dentro de un div, pues ese elemento NO lo va a agarrar 😄.
   .
   

   

2. Hijo directo: Este caso es similar al anterior, pero ahora solo agarrará a los hijos que este directamente adentro del padre. Recuerda que en el elemento padre nosotros podemos tener más cajitas con más elementos dentro, en este caso, este selector NO agarrará a esos otros elementos, por ejemplo:
   .
   

   
   .
   Al poner el signo > estoy especificando que quiero seleccionar a cualquier elemento que tenga la clase .rojito, pero este elemento tiene que estar directamente dentro de un <div>.
   .
   

   
   .
   En este ejemplo el <span> que está dentro del <section> NO sería seleccionado porque, aunque está dentro del <div> NO está directamente dentro del <div> 😄.

3. Elemento adyacente: Básicamente selecciona a la etiqueta que esté debajo de la primera etiqueta 👀.
   .
   

   
   .

4. General de hermanos: Es similar al adyacente, pero esta vez no solo selecciona al de abajo, sino a cualquiera que esté al mismo nivel que el selector original, es decir, a sus hermanos :3
   .
   ¡Y podemos combinar más selectores! OwO. Por ejemplo:
   .
   Puedo seleccionar a todas las etiquetas <p> que estén directamente adentro de cualquier elemento con la clase azulitos y que a su vez, estos elementos sean hermanos de algún elemento con la clase .rojito y que este elemento con la clase .rojito esté dentro de un <div> OwO:
   .
   

   
   .
   Este es un selector MUY específico, y podemos ser aún más específicos, pero quiero que veas como podemos empezar a combinar selectores, y muchas veces es más fácil leer estos selectores de derecha a izquierda 😄.
   .
   Este puede ser un tema un poco complicado, ¡no te desanimes! Recuerda los consejos, para a practicar un rato, experimenta, curiosea, repite la clase si es necesario, pero hazlo hasta que lo consigas, ¡sé que tú puedes! >:3

☝ Gracias a los selectores podemos agarrar cualquier elemento que haya en nuestro HTML, pero lo genial es que tenemos distintas formas de agarrarlos:
.

Selectores básicos

.

1. De tipo: Este selector nos permite tomar cualquier etiqueta HTML usando su mismo nombre. ¡Pero recuerda que en tu HTML puede haber varias etiquetas con el mismo nombre! Así que este selector agarrará TODAS las etiquetas que coincidan con el mismo nombre 👀.
   .
   
   

.
2. De clase: Una clase básicamente es un atributo más dentro de tu HTML, por ejemplo, yo puedo tener este div:
.

.
Entonces, mediante este selector, yo puedo agarrar a todas las etiquetas que tengan la clase “rojito”, por lo que, si yo tengo estos divs:
.

.
Y uso este selector:
.

.
¡Acabaré agarrando a estos dos!
.

.
3. De id: Como su nombre lo dice, este es un selector que selecciona cualquier elemento a través de su id. Al igual que con las clases, podemos poner un id a nuestros elementos, pero a diferencia de las clases NO debemos poner el mismo id en dos o más elementos.
.

.
Entonces, yo puedo simplemente agarrar cualquier elemento por medio de su id:
.

4. De atributo: Básicamente, al igual que con las clases, podemos seleccionar varios elementos, pero ahora filtrándolos por su atributo (en el ejemplo de la clase usamos href, pero podemos usar cualquier otro atributo OwO).
5. Universal: En pocas palabras, este selector agarra todo lo que esté en nuestro HTML jajaja

Notas de la clase

Básicos

• De tipo: div {...}
• De clase: .elemento {...}
• De ID: #id-del-elemento
• De atributo: a[href="..."]{...}
• universal: *{...}

Combinadores

• Descendientes: div p
• Hijo directo: div > p
• Elemento adyaente: div + p
• General de hermanos: div ~ p

Amigos les recomiendo que hagan los siguientes ejercicios para entender aún mejor como funcionan los selectores combinadores.

1. Descendientes: En este ejemplo, todos los elementos “p” que están dentro de un elemento “div” son estilizados, así no sean hijos directos. Por otra parte, los elementos “p” que estén solitos no se estilizan.

1. Hijo directo: En este ejemplo, únicamente los elementos “p” que estén directamente dentro de un elemento “div” son estilizados. La diferencia con el ejemplo anterior es que el elemento “p” que está dentro de “section” no se estiliza.

1. Elemento adyacente: En este ejemplo, “p” se va a estilizar únicamente si viene justo después de la etiqueta de cierre de un elemento “div”.

1. General de hermanos: En este ejemplo, todos los elementos “p” que estén al mismo nivel de un “div” serán estilizados.

Les recomiendo que también prueben con el siguiente ejemplo, para que vean que “Párrafo 7” y “Párrafo 8” también se colorean por estar al mismo nivel que el primer “div”, a pesar de venir después de un “section”.

<body>
    <div>
        <p>Párrafo 1</p>
        <section>
            <p>Párrafo 2</p>
        </section>
    </div>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <p>Párrafo 5</p>
    <section>
        <p>Párrafo 6</p>
    </section>
    <p>Párrafo 7</p>
    <p>Párrafo 8</p>
</body>

Es muy aconsejable que las clases lo utilicemos en css y el ID en JavaScript.

Encontre un juego para practicar los selectores de manera entretenida Práctica con CSS Diner, me parece muy interesante.

La estructura CSS se basa en reglas que tienen el siguiente formato:

https://lenguajecss.com/css/introduccion/estructura-de-css/

En vez de “HTML:5” tambien se puede usar un signo de exclamacion “!” 😄

Combinadores
Echemosle un vistazo a los combinadores en codigo y de manera grafica para comprenderlos mejor.
Descendientes:

Hijo directo:

Elemento adyacente:

General de hermanos:

NOTA IMPORTANTE:
Recuerden no quedarse solamente con lo que damos en la clase, complementen con videos, documentación y demás.

Los selectores nos ayudan a indicar el elemento sobre el que se van a aplicar los estilos. Existen muchos tipos de selectores y algunos de los más destacados son los que se detallan a continuación.

Selector universal

Sintaxis: * { atributo:valor; }

Ejemplo:* { color: grey; }/* El estilo se aplicará a todos los elementos de la página*/

Selector etiqueta

Sintaxis: etiqueta { atributo:valor }

Ejemplo: p {color: green;}  /* El estilo se aplicará a todos los elementos <p>.*/

Selector clase

Sintaxis: .clase { atributo:valor }

Ejemplo: .blend{color: red;} /* El estilo se aplicará a cualquier elemento que tenga la clase .blend */

Selector identificador
El selector identificador utiliza el atributo id para seleccionar un elemento. Solo puede haber un elemento con un id dado en un documento.

Sintaxis: #id { atributo:valor }

Ejemplo: #cent {color: blue;} /* El estilo se aplicará al elemento que tenga el id #cent */

Selector descendiente
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento padre.

Sintaxis: selector1 selector2 selectorN {atributo: valor;} /* El estilo se aplica sobre el selector N */

Ejemplo: div p { color: black;} /* El estilo se aplica a todos los párrafos que se encuentren dentro de una etiqueta div */

Combinación de selectores
La combinación de selectores nos permite dar un estilo a todos los selectores indicados.

Sintaxis: selector1, selector2, selector3{atributo: valor;} /* El estilo se aplica sobre los selectores indicados */

Ejemplo: div, p { color: orange;} /* El estilo se aplica a todos los divs y párrafos */

Selector de hijos
Se usa para seleccionar un elemento que es hijo de otro elemento.

Sintaxis: selector1 > selector2 {atributo: valor;}  /* El estilo se aplica sobre el selector 2 */

Ejemplo: div > p { color: white;} /* El estilo se aplica a todos los párrafos que sean hijos de un div */

Selector adyacente
Se usa para seleccionar elementos que son hermanos, es decir, su elemento padre es el mismo y están seguidos en el código HTML.

Sintaxis: selector1 + selector2{ atributo: valor; } /* El estilo se aplica al selector 2 */

Ejemplo: div + p { color: black;} /* El estilo se aplica a todos los párrafos que sean hermanos de un div */

la virgulilla se puede sacar con la combinacion
alt + 126
~

Hasta ahora voy entendiendo pero recomiendo verlo a velocidad 0.85 algunas cosas las hace en automático (memoria muscular) y hay que estar parando la clase para analizar qué fue lo que hizo y poder seguir el ritmo pero todo bien hasta ahora.

MATRIZ DE COMBINADORES CSS

CSS Selector Cheat Sheet

Selectores básicos

Tipo

Nos hace referencia a la etiqueta de HTML que queremos estilizar, simplemente tenemos que colocar el nombre de la etiqueta.

Lo usamos para hacer pequeños ejemplos, alguna práctica, pero no es recomendable utilizarlo para proyecto reales.

Clase

Para utilizarlo usamos el valor del atributo class de nuestra etiqueta de HTML precedida de un ..

ID

Para utilizarlo usamos el valor del atributo id de nuestra etiqueta de HTML precedida de un #.

Atributo

Podemos estilizar elementos dependiendo del atributo que tengan, colocamos nuestro selector tipo seguido de corchetes, dentro de estos colocaremos el atributo que tiene nuestro elemento a estilizar.

Universal

Todos los estilos que le apliquemos a este serán aplicados todos los elementos de nuestro HTML.

Selectores combinadores

Hijos descendientes

Aplica los estilos a todos los elementos que sean hijos, nietos, etc, del elemento padre.

Hijo directo

Se le aplica los estilos a todos los hijos que sean si o si directos del elemento padre.

Elemento adyacentes

Los estilos se aplican si y solo si son hermanos cercanos, uno de bajo del otro.

General de hermanos

Aplica los estilos a los hermanos general de cierto elemento.

Otros apuntes

Curso Definitivo de HTML y CSS

Clases

Combinadores: Adjacent Siblings (combinators)

Combinadores: General Sibling

Combinadores: Hijo y Descendiente

Aquí hay una imagen para ver de manera gráfica los selectores combinadores

MATRIZ DE SELECTORES

Cabe destacar que escribir la etiqueta <style> en el archivo de html para cambiar el estilo es mala practica, seguramente mas adelante la profe lo va a aclarar.
Lo correcto seria crear un archivo nuevo que por lo general se lo llama style o estilo seguido de .css, y ahi armar la estructura tal cual lo hace dentro de la etiqueta <style>.
Esto se lo linkea al archivo de html en la seccion <head> utilizando <link>

para los que no entienden algunas cosas, les recomiendo primero ver el curso definitivo de html y css del profe Diego de granda.
En la ruta estaba primero ese que este curso pero ahora el de frontend aparece primero.
Ahí se explica todo mas detalladamente, saludos.

Les dejo ésta página con referencia a los selectores.
https://uniwebsidad.com/libros/css/capitulo-2/selectores-basicos

Aunque Estefany explicó muy bien, en lo personal se me complicó un poco el entender los selectores combinados.

Pueden usar el siguiente enlace de la documentación de MDN, donde se explican los Selectores combinados y vienen algunos ejemplos interactivos donde hasta pueden practicar un poco para terminar de aterrizar el tema

Selector ID # : Se usa para etiquetas contenedoras y no son reutiliazables, pues cuando ponemos un id es algo unico

Selector Class : Es el mas usado, por que se puede reutilizar, pues varios elementos puede tener la misma clase

Selector Universal * :Se usa muy poco pues este afecta a todos nuestro estilos, solo se usa resetear los estilos que trae el navegador por defecto.

Combinadores

//Aplica estilos a todos los p que esten dentro del Div
Descendientes:   div  p { color:red;}

//Aplica el estilo a la etiqueta p que este despues del div padre

Hijo Directo: div > p { color: blue;}

//Aplica estilos a la etiqueta P que este seguida del DIV
Elemento Adyacente: div + p { color: green;}

//Aplica estilos a todos los hermanos P despues de Div

General de Herencia:  div ~ p { color: black}

Esta página es excelente para practicar el tema de combinadores en CSS!
https://flukeout.github.io/

Los selectores son los que identifican los elementos que hay en una página web y así definen sus propiedades.

Me encanta esta clase!

Dejo mi ejemplo. Tal vez a alguien le sirva entenderlo cómo yo lo entendí. Saludos mis estimados Frontend developers 😄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Descendientes */
    div p{
        background-color: #585;
    }
    /* Hijo directo */
    div > div{
        background-color: #985;
    }
    /* Elemendo adyacente */
    div + section{
        background-color: rgb(41, 168, 231);
    }
    /* General de hermanos */
    div ~ p{
        background-color: #125;
        color: gold;
    }
    </style>
</head>
<body>
    <div>Descendientes
        <p>Soy un descendiente</p>
        <p>Y yo también</p>
    </div>
    <section>
        <p>Yo no sería un hijo directo, soy un elemento adyacente porque
            estoy después de una etiqueta div de cierre.
        </p>
    </section>
    <section>
        <p>Yo no soy un elemento adyacente</p>
    </section>
    <div>
        <div>Yo soy un hijo directo</div>
    </div>
    <section>
        <p>Yo soy el otro, otro adyacente</p>
    </section>
    <div>Aquí viene un General de hermanos</div>
    <p>Hola, soy el estilizado general de hermanos</p>
</body>
</html>

Como complemento la documentación de Mozilla da una buena explicación acerca de los selectores de CSS https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors

Para todos los que recién empiezan en el desarrollo web, les recomiendo que hagan caso omiso a:

• Selectores de tipo
• Selectores de atributo

En el trabajo real nunca se usan. Para fines educativos esta bien.

Aquí pueden encontrar información sobre html, css y javascript. Además, de los ejemplos de los selectores: W3School

Una practica recomendada para crear los estilos del sitio web es crear aparte un archivo CSS y enlazarlo mediante la etiqueta

<link rel="stylesheet" href="nombre del archivo de la hoja de estilo">

Un archivo de estilo para cada dispositivo

Saludos a todos.
Para las combinaciones de colores, tanto para diseño gráfico como para desarrollo web, les recomiendo Paletton

Bueno creo que la lié demasiado pero por lo menos ya entiendo todo lo que he visto hasta ahora

Aquí dejo lo que hice. utilicé los comentarios de la profe RetaxMaster para hacer una pequeña página donde tomé apuntes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A5-C8</title>
    <!--Esta fuente la tomé de fonts.google.com-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">
    <!--Esta fuente la tomé de fonts.google.com-->
    <style>
        * {
            font-family: 'Nunito', sans-serif;
        }
        .Header2 {
            color: cadetblue;
        }
        /* Ejemplo de selectores descendientes | ABAJO |*/
        div .pA {
            font-weight: bold;
        }
        /* Ejemplo de Hijo directo | ABAJO |*/
        ul > .listitem {
            font-weight: bold;
            font-size: 13pt;
            text-decoration: underline;
            color: cadetblue    ;
        }
        /* Ejemplo de elemento adyacente | ABAJO |*/
        li + section {
            background-color: #f6ffff;
            width: 570px;
        }
        /* Ejemplo de General de hermanos | ABAJO |*/
        ul ~ p{
            background-color: rgb(235, 255, 202);
            width: 570px;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="Header1">A5 - C8</h1>
    </div>
    <div>
        <h2 class="Header2">Clase 8 | parte 2</h2>
    </div>
    <div>
        <h3 class="Header3">Selectores combinadores</h3>
    </div>
    <div>
        <p>Dentro de los selectores combinadores encontramos</p>
        <p>los siguientes:</p>
    </div> 
    <div>
        <!--Este no contiene nada, pero debe ir para que el general de hermanos me funcione como quiero-->
        <ul>
        </ul>
        <!--Barra verde encima de subtítulo de selectores descendientes-->
            <p>...</p> 
        <ul>
            <li class="listitem">Selectores descendientes</li>
                <section>
                        <p class="pA">
                            En este selector, el que está más a la izquierda es el selector padre<br> 
                            y los que están a su derecha serán los sectores hijos, por ejemplo:
                        </p>
                            <img src="https://static.platzi.com/media/user_upload/carbon%20%288%29-2f40be2f-b500-45ba-b640-0fa77a19e6d9.jpg" alt="Example1" height="100">
                        <p class="pA"> 
                            En este selector el div es el padre y el .rojito es el hijo. ¿Esto qué<br>
                            qué significa? Básicamente que este selector va a agarrar cualquier<br> 
                            elemento que tenga la <span style="color: #bb4040;"> clase </span> .rojito, <span style="color: #bb4040;">pero este elemento<br>
                            debe estar dentro de un div.</span> O sea, si se encuentra algún elemento rojito que<br> 
                            tenga la clase .rojito, pero este elemento NO está dentro de un div, pues ese<br>
                            elemento No lo va a agarrar.
                        </p>
                </section>
        </ul>
        <!--Barra verde encima de subtítulo de hijo directo-->
            <p>...</p> 
        <ul>      
            <li class="listitem">Hijo directo</li>
                <section>
                        <p class="pA">
                            En este caso es similar al anterior, pero ahora solo agarrará a los hijos<br>
                            que esté directamente adentro del padre. recuerda que en el elemento padre<br>
                            podemos tener más cajitas con más elementos adentro, en este caso, este<br>
                            selector NO agarrará a esos otros elementos, por ejemplo
                        </p> 
                        <img src="https://static.platzi.com/media/user_upload/carbon%20%2811%29-5e9b9bbe-64e9-4210-9c64-de62874fc8c4.jpg" alt="ExampleB1" height="100">
                        <p class="pA">
                            Al poner el signo > estoy especificando que quiero seleccionar a cualquier<br>
                            elemento que tenga la clase .rojito, pero este elemento tiene que estar<br> 
                            directamente dentro de un <div>
                        </p>
                        <img src="https://static.platzi.com/media/user_upload/carbon%20%2812%29-bb3cebd4-4d9b-4c1b-86be-2b09e4b9bfb4.jpg" alt="ExampleB2" height="200">
                        <p class="pA">
                            En este ejemplo el span que está dentro del section NO sería seleccionado<br> 
                            porque aunque esté dentro del div no está directamente dentro del div
                        </p>
                </section>
        </ul>
        <!--Barra verde encima de subtítulo de elemento adyacente-->
            <p>...</p> 
        <ul>  
            <li class="listitem">elemento adyacente</li>
                <section>
                        <p class="pA">
                            Basicamente selecciona a la etiqueta que esté debajo de la primera etiqueta
                        </p>
                        <img src="https://static.platzi.com/media/user_upload/carbon%20%2814%29-91dc5df7-44b3-4bce-b1a7-860696b3c6ce.jpg" alt="ExampleC1" height="100">
                        <img src="https://static.platzi.com/media/user_upload/carbon%20%2814%29-91dc5df7-44b3-4bce-b1a7-860696b3c6ce.jpg" alt="ExampleC2" height="100">
                </section>
        </ul>
        <!--Barra verde encima de subtítulo de general de hermanos-->
            <p>...</p> 
        <ul>
            <li class="listitem">General de hermanos</li>
                <section>
                        <p class="pA">
                            Es similar al adyacente, pero esta vez no solo selecciona al de abajo, sino a<br>
                            cualquiera que está al mismo nivel que el selector original, es decir, a sus<br>
                            hermanos.<br>
                            Y podemos combinar más selectores, por ejemplo:<br>
                            Puedo seleccionar a todas las etiquetas p que estén directamente dentro de <br>
                            cualquier elemento con la clase .azulitos y que a su vez, estos elementos <br>
                            sean hermanos de algun elemento con la clase .rojito y que este elemento <br>
                            de la clase .rojito esté dentro de un div.
                        </p>
                        <img src="https://static.platzi.com/media/user_upload/carbon%20%2815%29-1c6c80d5-7927-4e58-8345-0c62c80a6aca.jpg" alt="ExampleD1" height="200">
                        <p class="pA">
                            Este es un selector muy especifico, y podemos ser aún más específicos, pero<br>
                            de esta forma podemos empezar a combinar selectores, y muchas veces es más<br>
                            facil leer estos selectores de derecha a izquierda.
                        </p>
                </section>
        </ul>
    </div>
</body>
</html>

Comparto el resumen personal que hice de la clase anterior y esta. Tiene espanglish pero es un espanglish con orden 😅

<!-- @author: Hernán Hernández (herohernan) -->
<!-- @date: 29/12/2021-->
<!-- @note: Text on English and comments in Spanish -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web page - herohernan</title>

    <!-- CSS styles -->
    <style>
        /* división (div) pura */
        div {
            background: lightblue;
        }
        /* División utilizando un selector de "clase" */
        .divisionNum2{
            color: darkorange;
        }
        /* División utilizando un selector de "ID" */
        #divisionNum3{
            color: brown;
        }
        /* División utilizando un selector de "atributo" */
        a[href="https://github.com/herohernan"]{
            color: fuchsia;
        }
        /* Selector *universal. Aplica a toda la pag web */
        * {
            background: papayawhip;
        }
        /* Selector combinador: "descendiente". "h2" dentro de "div" */
        div h2{
            color: goldenrod;
        }
        /* Selector combinador: "hijo directo". "div" dentro de un "div" */
        div > div{
            color: red;
        }
        /* Selector combinador: "elemento adyacente". El "section" que sigue después de un "div" */
        div + section{
            color: limegreen;
        }
        /* Selector combinador: "general de hermanos". Todos los "h3" que sigue después de un "div" */
        div ~ h3{
            color: teal;
        }
    </style>
</head>
<body>
    <!-- Pestaña de navegación -->
    <nav>
        <ul>
            <li>About me</li>
            <li>Contact us</li>
        </ul>
    </nav>

    <!-- Sección #1 de la página web -->
    <section>
        <!-- Título en el documento -->
        <h1>Hernán Hernández (herohernan)</h1> <!-- También hay otros textos de menor prioridad (h2..h6) -->
        
        <!-- Párrafo -->
        <p>This is the first example of a html page with Css</p>
        
        <!-- Se crean 3 items sobre una lista desordenada (ul). La etiqueta <b> = negrita -->
        <ul>
            <li><b>html</b> = HyperText Markup Language. This is the structure of the web pag (the skeleton)</li>
            <li><b>Css</b> = Cascading Style Sheets. This is the live of the WebPage to stylize elements like colors, sizes, positions</li>
            <li><b>JavaScript</b> = functionality of the web page</li>
        </ul>
    </section>

    <!-- Sección #2 de la página web -->
    <section>
        <!-- La etiqueta img trae la imagen de la url definida en el atributo "src" y la coloca acá con un texto alternativo ("alt") definido como ("cat")-->
        <img src="https://images.pexels.com/photos/4588458/pexels-photo-4588458.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="cat">
    </section>

    <!-- Formulario -->
    <form action="">
        <label for="name">Name: </label>
        <input type="text" id="name">
    </form>

    <!-- anchor (enlace para otras páginas) -->
    <a href="https://web.facebook.com/herohernan/">Go to facebook</a>

    <!-- división (div) pura. Nosotros podemos crear cuantas divisiones necesitemos dando orden al documento -->
    <!-- CSS: Arriba en el head se define un "background" especial para todo lo que se encuentre dentro de esta etiqueta "div"-->
    <div>
        Div: This text has a lightblue background
    </div>

    <!-- División utilizando un selector de "clase", creado por nosotros mismos -->
    <!-- CSS: Arriba en el head se define un "color" especial para todo lo que se encuentre dentro de la clase "divisionNum2" -->
    <div class="divisionNum2">
        Div class: This text has a lightblue background (div) and the characters are in darkorange (div class)
    </div>

    <!-- División utilizando un selector de "ID", definido por nosotros mismos -->
    <!-- CSS: Arriba en el head se define un "color" especial para todo lo que se encuentre en el ID = "divisionNum3" -->
    <div id="divisionNum3">
        div ID: This text has a lightblue background (div) and the characters are in brown (div ID)
    </div>

    <!-- División utilizando un selector de "atributo", definido por nosotros mismos-->
    <!-- CSS: Arriba en el head se define un "color" especial todo lo que se encuentre en el atributo href con el valor exacto de https://github.com/herohernan -->
    <a href="https://github.com/herohernan">Github</a>

    <!-- División utilizando un selector combinador: "descendiente", para h2 dentro de div -->
    <!-- CSS: Arriba en el head se define un "color" especial para todas las etiquetas "h2" que se encuentren dentro de un "div"-->
    <div>
        <h2>Descendant selector (Combinator): This is a text in goldenrod</h2>
    </div>

    <!-- División utilizando un selector combinador: "hijo directo", para div dentro de div -->
    <!-- CSS: Arriba en el head se define un "color" especial para todas las etiquetas "div" que se encuentren dentro de un "div"-->
    <div>
        <div>
            <p>Child selector (Combinator): This is a text in red</p>
        </div>
    </div>

    <!-- División utilizando un selector combinador: "elemento adyacente", "section" después de un "div" -->
    <!-- CSS: Arriba en el head se define un "color" especial para todos el "section" que van después de un "div"-->
    <div>
        <p>filler paragraph#1</p>
    </div>
    <section>
        <p>Adjacent sibling selector(Combinator): This is a text in limegreen</p>
    </section>
    <section>
        <p>filler section paragraph</p>
    </section>
    <div>
        <p>filler paragraph#1</p>
    </div>

    <!-- División utilizando un selector combinador: "general de hermanos", todos los "h3" después de un "div" -->
    <!-- CSS: Arriba en el head se define un "color" especial para todos los "h3" que van después de un "div"-->
    <div>
        <p>filler paragraph#2</p>
    </div>
    <h3>general sibling selecto(Combinator): This is a text in teal</h3>
    <h3>general sibling selecto(Combinator): This is a other text in teal</h3>
    <div>
        <p>filler paragraph#2</p>
    </div>
</body>
</html>

<!-- NOTAS DE APRENDIZAJE -->
<!-- Para crear una plantilla de Html.5 se escribe en la línea#1 el comando: "html:5" (sin comillas) y se presiona Enter -->
<!-- Estas plantillas en html se conocen con el nombre de "boilerplate" (Algo así como: datos básicos de prensa)-->
 

target="_blank", Me sirve para me habra una pestaña diferente de la url que estoy buscando, osea me habra otra diferente en la pagina que estoy trabajando

Esto pude hacer con lo poco que se de css para hacer una nota del tema

La verdad no creo que el tema sea complejo, pienso que la profe enreda un poco o no es lo suficientemente ilustrativa para presentar este tema en especifico

Estaba haciendo experimentos para saber cual tipo de selector básico tenía la prioridad sobre los otros y me encontré con esto 🤯:

1. Universal: * { . . . }

1. De tipo: (elemento) { . . . }

1. De atributo: a[href="…"] { . . . }

1. De clase: .(elemento) { . . . }

1. De ID: #(ID del elemento) { . . . }

La de ID fue la que se mantuvo por sobre todos los selectores, nadie superó al ID 💪🏽😎
En otras palabras el selector de ID es la última capa que se pinta en la pantalla

Es recomendable utilizar ID’s en la menor cantidad posible y solo con elementos muy específicos, ya que si se utilizan en gran cantidad o equivalente a la misma cantidad de clases en un proyecto pueden llegar a romper el código.

Es muy normal usar muchas clases o en ocasiones solamente clases, pero no por eso no deben usarse los ID´s, únicamente úsenlos con cuidado.

Buen día a todos y feliz año!.. Solo quería decir que por buenas prácticas, es mejor que todo lo que quieran poner en la etiqueta Style, lo pongan en un archivo Css. Ejemplo: Style.css y luego lo linkean al html, bien fácil, poniendo en la sección del “Head” una etiqueta que se llama “link”, y en src ponen ./ y seleccionan el CSS para así quedar linkeado

En Windows si no saben sacar la virgulilla se hace de la siguiente manera:

alt + 126

yo creo que el la paleta de rosas no les la preferida de la profesora

Si están utilizando visual studio code, para crear el boilerplate del HTML, escriben el símbolo --> ! seguido de enter o tab.

creo q vas muy rapido

La utilización de los colores en CSS es en realidad bastante fácil. Los formatos de color que se pueden utilizar en CSS son códigos de colores Hex, nombres de colores HTML, RGB y HSL. 🎨
.
Si eres nuevo en CSS te dejo este articulo de Conceptos Básicos de Color CSS 😄

ufff excelente clase, un buen resumen

Aprendí algo nuevo.
No conocía el selector de atributo creo que puede ser muy útil.

universal

de clase

Una buena opción para tener un enlace simpler pero más atractivo…

a[href="platzi.com/home"]{
    color: white;
    text-decoration: none;
    font-size: 25px;
}

a[href="platzi.com/home"]:hover, a[href="platzi.com/home"]:visited{
    color:red;
}

¡¡Genial!! A seguirle dando.

Mi primer aporte bien hecho

SELECTORES BASICOS

    div {
        background-color: aquamarine;
        margin: 1em;
    }
    .titulo1{
        color: blue;
        padding: 1em;
    }
    #Jack{
        color: black;
    }
    a[href="https://www.google.com"]{
        color: brown;
    }

SELECTORES COMBINADORES

    div p{
        color: red;    
    }
    div > p{
        color:blue;
    }
    P + div{
        color: aqua;
    }
    li ~ li{
        color: darksalmon;
    }

Dejaré aquí mis apuntes en Notion, espero a alguien le pueda servir 🤗:
https://drive.google.com/file/d/1v0M-MFNvrVrZLqIuJKwPxkqttsqp30G_/view?usp=sharing

El selector adyacente se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo + para separar los dos elementos: elemento1 + elemento2 { … } Extraído de: https://uniwebsidad.com/libros/css/capitulo-2/selectores-avanzados#:~:text=El selector adyacente se emplea,%2B elemento2 { ... }

Me ayudó a complementar lo del hijo directo esta página:

[](https://cybmeta.com/el-selector-css-o-mayor-que#:~:text=El selector «mayor qué» (,como «selector de hijos«.)

Selectores combinadores

Es mi idea o actualizaron estas clases. Estupendo 😃

Holaa!! si quieren mover el código como lo hace la profesora se debe seleccionar el código y después manteniendo presionada la tecla alt se mueve con las flechas arriba y abajo. 😃

seleccionar código + alt + flechas arriba/abjo

Hola comunidad.
Estoy dando mis primeros pasos con css.
Me regalan una estrellita en mi carta hecha con css en mi github por favor. posdata, son los mejores.
Gracias.

Aquí les dejo un tutorial de atajos en VS Code que sirven mucho, ahorras tiempo y te sientes pro 😃
https://youtu.be/9gR2j0dE-uw

Selectores modo sad

Me costó entender la selección de los hijos directos porque creo que en el minuto 9:54 hay un error. Se quiere colorear solamente la palabra “Platzi” y no “Es” y finalmente, en el ejercicio se colorean los dos. Esto, quizás, es porque ambos están dentro de div. Si es así, por favor, se podría re-grabar el video con ejemplos correctos para poder entender mejor. Gracias!

lo mas normal es usar clases y ids

Recomiendo este juego para practicar selectores css
https://flukeout.github.io/

Que manera de explicar ❤️ !!!

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Bastante claro y explicito todo

Me parece interesante que descubrí que si colocas un p dentro de otro p que está dentro del div también le aplica el selector div > p

La diferencia entre div + p y div ~ p es que en el primer caso afecta solo al primer p despues de un div. En el segundo afecta a todos los p juntos despues de div ¿Correcto?

Esto me hace recordar un poco al condicional if
.
If(p está dentro de div)
{
Le aplica el codigo css
}

Leyendo el aporte de RetaxMaster intente aplicarlo. “por lo menos lo básico” y este fue el código que resulto, me ayudo bastante.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div .rojito {
            background: powderblue;
        }
        div > .rojito {
            color: red;
        }
        div + div {
            color: brown;
        }
        span ~ span {
            background: wheat;
        }
    </style>
</head>
<body>
    <div >
        <span class="rojito">Hola, esta es una prueba</span>
        <section>
            <span class="rojito">Esta es otra prueba</span>
        </section>
    </div>
    <div>
        <span class="azulito">Esto es otro div</span>
        <span class="azulito">,otro texto dentro del mismo div</span>
        <span class="azulito">,otro texto mas dentro del mismo div</span>
    </div>
</body>
</html>

Para mi esta es la mejor página en cuanto a colores respecta.
https://encycolorpedia.es/

¿Qué es mejor?, Utilizar los selectores combinadores o utilizas los IDs y Clases para especificar los estilos de CSS.

Resumen en Notion
https://n9.cl/csz1u

Lo que mas me gusta de esta clase es que nos recomienda paginas para ayudarnos a trabajar tanto en html como en css

Tipos de selectores “Combinadores”:

• Descendiente
  div p { … }
• Hijo directo
  div > p { … }
• Elemento adyacente
  div + p {…}
• General de hermanos
  div ~ p { … }

¡¡Muy práctico!! Así se aprende mejor. Gracias.

así fue como lo hice yo, como método de practica

Alt Gr + tecla de [*,+,~] = ~

Con ayuda de esta clase y los aportes de compañeros, el tema en verdad me queda mucho más claro 😃

Selectores basicos:

De tipo Div {…}
De clase .Elemento {…}
De ID # Id del elemento
De Atributo a [ href ="…"] {…}
Universal * {…}

Es bueno destacar que en esta clase se aplicó el CSS de forma incrustada, ya que se escribió en el mismo index. También se puede de forma en línea y externa.

• En Línea: Cuando los estilos van dentro de la etiqueta del HTML.

• Incrustado: Cuando los estilos van en la cabecera del index.

• Externo: Cuando se crea otro archivo de tipo “.css” y se referencia este documento en el index.

Esta última es la forma más recomendable para trabajar nuestros proyectos

Tipos de selectores:

Los selctores sirven para llamar elementos para agregarle estilos.
Dichos elementos pueden ser:

• Etiquetas
• ID
• Class

Ahora vamos a ver como hacer para llamarlos:

• Etiquetas

body {
	color: blue;
}
Aqui le digo a CSS, busque la etiqueta body y apliquele este estilo

• Id:
  Para llamar id, siempre es con “”"#"""

#titulo {
	color: red;
}

Aqui le digo a css, busque un elemento el cual tiene una propiedad de id que cuyo valor es “titulo”

Class:
Para llamar class, siempre es con “”"."""
.container {
color: yellow;
}
Aqui le digo a css, busque un elemento el cual tiene una propiedad de class que cuyo valor es “container”

Otras selectores:

p.texto {
color: green;
}
Aqui le digo a css, a todas las etiquetas p, que tengan un elemento cuyo valor sea texto, agreagales este estilo

div p {
color: orange;
}
Aqui le digo a css, a todas las etiquetas div que contengan deentro etiquetas p, agregueles este estilo

div h2, div h3 {
color: brown;
}
Aqui le digo a css, a todos las etiquetas div que contengan dentro equitas h2 o h3, agregueles este estilo

• {
  font-size: 24px;
  }
  Aqui le digo a css, seleccione absolutamente todos los elementos y agregue este estilo

Notes:

• Los tipos de selectores basicos son:
  • de tipo (se refiere al tipo de elemento, i.e <div>, <section>, <h1>, etc…) → sirven para codigo muy pequeño por si solos.
  • de clase (clase de css .my-class)
  • de id (id de css #my-id)
  • de atributo (un atributo de algun elemento, a[href=”algunapagina”])
  • universal (* → selecciona todo)
• Los selectores de clase son mas flexibles, puesto podemos tenerlos en multiples elementos y estilar secciones completas sin mucha dificultad, mientras que los selectores de id son de manera exclusiva por elemento
• Existen 4 tipos de selectores combinadores los cuales son:
  • descendientes → div p : selecciona cualquier p que se encuentre dentro del scope (y anidacion) de div
  • hijo directo → div > p : selecciona solo los p que esten en primer nivel de anidacion dentro del div
  • elemento adyacente → div + p : selecciona los p que esten directamente “al lado” del div
  • general de hermanos → div ~ p : selecciona cualquier p que este al mismo nivel del div
• El proposito de los selectores combinadores es poder seleccionar de una manera mas “especifica” un elemento que queremos estilizar
• Recurso extra: https://www.youtube.com/watch?v=Bcr70LIJcOk&t=593s

Aquí les dejo una lectura que ayudara a entender un poco mas sobre especificidad. Tuve la necesidad ya que no se me estaban aplicando algunos cambios. Ya logre entender por qué me estaba pasando.
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#especificidad

me gusto esta clase, no conocia esos selectores combinadores + ~

pequeño aporte pueden usar

target="_blank"

para cuando den click se abra en otra pestaña
ejemplo :

<a href="https://google.com" target="_blank">google.com</a> 

selectores

• Básicos
  • de tipo
  • de clase
  • de id
  • de atributo
  • universal
• Combinadores
  • Descendientes
  • Hijo directo
  • Elemento adyacente
  • General de hermanos

Aqui mi codigo:
Gracias profe Estefany y RelaxMaster

<!DOCTYPE html>
<html lang=“en” dir=“ltr”>
<head>
<meta charset=“utf-8”>
<title>selectores Combinadores</title>
<style>
/**{
background :violet;
}*/
div p {
color: darkgreen;
}
.solito p{
color: white;
}
div > div{
background: brown;
}
.la_P p {
background: black;
}
div + section{
background: pink;
}
div ~ p{
color: lime;
}

</style>

</head>
<body>
<div>
<p>Lo</p>
<p>voy</p>
<p>a</p>
<p>lograr!!</p> <br>
<p>este es un <strong>selector DESCENDIENTE</strong> div p,
basicamente: creo un selector tipo div y un “hijo” p y a todos los elementos
que estan dentro del div{} que se llaman p se le aplicaran los estilos.
en este caso color: darkgreen;</p>

  <div class="directo">
    <ul>
      <li>aqui esta un <strong>selector directo</strong> al que cambie a ul (listas) </li>
      <li>entonces, div > div{
        background: brown;} </li>
        <li>este me pinta una linea color brown  en el texto que se encuentra
      entre el div class="directo"</li>
    </ul>
  </div>
</div>
<div class="la_P">
  <p>aqui estamos colocando un parrafo para demostrar que el <strong>combinador general hermanos</strong> <br>
    div ~ p{color: lime; } hace que el texto en p se pondra de ese color.</p>
</div>

<section>
  aqui esta el <strong>selector adyacente</strong> div + section{background: pink; }
  este selector al que etiquete con section, lo hubico despues del div de cierre <br>
  no importa cual sea, mientras no quede dentro de un div. <br>
  elcontenido de este section se resaltara con una linea color pink.
</section>

<p>en este espacio ya sali del div y la p esta sola, <strong><em>no se estiliza.</em></strong><br>
pero al utilizar el selector general de hermanor p~, me modifica tambien este parrafo.</p>

Y aqui esta este texto que no tiene ninguna etiqueta adicional y esta volando entre el body.

</body>
</html>

Los selectores ayudan a seleccionar etiquetas y poder ponerles un estilo con CSS, existen diferentes maneras de hacer unas más especificas que otras como se ve en la imagen

Se me hizo más fácil hacerlo directamente en el manual, espero se entienda 😃

tipos de selectores básicos

Lista de selectores básicos.

Lista de selectores combinadores