No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tipos de selectores: básicos y combinadores

8/24
Recursos

El selector define el elemento o conjunto de elementos HTML a los cuales se añadirán estilos. Existen nombres de colores propios de CSS que puedes explorar. A continuación veamos más sobre selectores.

Cuáles son los selectores básicos

Un selector básico es la mínima expresión CSS para colocar estilos.

selector {
    /* Estilos */
}
Tipos de selectores básicos

1. Selector de tipo

Selecciona todos los elementos que coincidan con el nombre de la etiqueta HTML.

div {
    /* Todos los div en el documento */
}

Desafío de selector de tipo

Intenta dar un color de fondo a 10 etiquetas <div> con un solo selector, utiliza la propiedad background-color.

2. Selector de clase

Selecciona todos los elementos que coincidan con las etiquetas HTML que contengan el atributo class.

<!--archivo HTML-->
<div class="card"> Soy una carta </div>

Para seleccionar estos elementos, se empieza por un punto . y seguido el valor exacto del atributo class de la etiqueta. Puede ser cualquier valor que desees colocar.

/* archivo CSS */
.card {
    /* Todas las etiquetas con la clase "card" */
}

Puede existir más de un valor dentro del atributo class separados por espacios.

<!--archivo HTML-->
<div class="card card1"> Soy una carta </div>
<div class="card card2"> Soy una carta </div>
.card {
    /* Todas las etiquetas con la clase "card" */
}

.card1 {
    /* Todas las etiquetas con la clase "card1" */
}

.card2 {
    /* Todas las etiquetas con la clase "card2" */
}

Desafío de selector de clase

De un conjunto de etiquetas <div> intenta dar un color de fondo a las etiquetas que contengan la clase "card" con un solo selector. Después, intenta dar un color de letra diferente para las etiquetas que contengan "card1" y "card2"

3. Selector de identificador único (id)

Selecciona el único elemento que coincida con la etiqueta HTML que contenga el atributo id. Solo puede existir un valor id para todo el documento.

<!--archivo HTML-->
<button id="eliminar"> Eliminar  </button>

Para seleccionar el elemento, se empieza por el símbolo de hashtag # y seguido el valor exacto del atributo id de la etiqueta. Puede ser cualquier valor que desees colocar.

/* archivo CSS */
#eliminar {
    /* La única etiqueta con el id "eliminar" */
}

Desafío de selector de ID

De un conjunto de etiquetas <button>, existe un único botón para eliminar. Intenta colocar un color de fondo rojo a este elemento.

4. Selector de atributo

Selecciona los elementos que coincidan con la etiqueta HTML que contenga el atributo y valor especificado.

<!--archivo HTML-->
<a href="https://platzi.com"> Ir a Platzi </a>

Para seleccionar los elementos, se empieza por el nombre de la etiqueta, seguido de corchetes [] que contiene el atributo y valor especificado.

/* archivo CSS */
a[href=""https://platzi.com"] {
    /* Todas las etiquetas <a> con una propiedad href con valor "https://platzi.com" */
}

Desafío de selector de atributo

Intenta colocar un color de fondo a las etiquetas <a> que contengan el atributo href con el valor de "https://platzi.com".

5. Selector universal

Selecciona todos los elementos del documento mediante un asterisco *.

* {
    /* Todos los elementos */
}

Desafío de selector universal

Intenta colocar un color de fondo a todos los elementos del documento.

Cuáles son los selectores combinadores

Un selector combinador es la unión de dos o más selectores básicos.

selector1 selector2 selector3 {
    /* Estilos */
}
Tipos de selectores combinadores

1. Combinador de descendientes

Selecciona todos los elementos del selector de la derecha que son hijos del selector de la izquierda, independientemente de la profundidad. Estos selectores están separados por un espacio.

padre hijos {
    /* Todos los hijos del padre */
}

div p{
    /* Todos los hijos <p> de <div>*/
}

.container img{
    /* Todos los hijos <img> de la clase "container"*/
}

Desafío del combinador de descendientes

Intenta colocar un color de letra a todas las etiquetas <li> que son hijos de la clase "container".

2. Combinador de hijo directo

Selecciona todos los elementos del selector de la derecha que son hijos directos del selector de la izquierda. Estos selectores están separados por >.

padre > hijos_directos {
    /* Todos los hijos directos del padre */
}

div > p{
    /* Todos los hijos directos <p> de <div>*/
}

.container > img{
    /* Todos los hijos directos <img> de la clase "container"*/
}

Desafío de combinador de hijo directo

Intenta colocar un color de letra a todos las etiquetas <p> que son hijos directos de la clase "container".

3. Combinador de elemento adyacente

Selecciona todos los elementos del selector de la derecha que están adyacente al selector de la izquierda. Estos selectores están separados por +.

elemento + adyacente {
    /* Elementos adyacentes */
}

div + p{
    /* Todos los <p> adyacentes a <div>*/
}

.container + img{
    /* Todos los <img> adyacentes a la clase "container"*/
}

Adyacente significa que comparten el mismo padre y está situado inmediatamente hacia abajo de otro elemento. Por ejemplo, en el siguiente código, <div> está adyacente a <h1> y <p> está adyacente a <div>. Sin embargo, <h1> no está adyacente a <div> y <div> no está adyacente a <p>.

<!--archivo HTML -->
<h1>Soy un título </h1>
<div>Soy un div</div>
<p>Soy un párrafo</p>

Desafío de combinador de elemento adyacente

Intenta colocar un color de letra a todos las etiquetas <p> que están adyacente a las etiquetas <div>.

4. Combinador general de hermanos

Selecciona todos los elementos del selector de la derecha que son hermanos del selector de la izquierda. Estos selectores están separados por ~.

elemento ~ hermanos {
    /* Elementos hermanos */
}

div ~ p{
    /* Todos los <p> hermanos de <div>*/
}

.container ~ img{
    /* Todos los <img> hermanos de la clase "container"*/
}

Hermanos significa que comparten el mismo padre y están situados hacia abajo de otro elemento. Por ejemplo, en el siguiente código, <div> y <p> son hermanos de <h1>, pero <h1> no es hermano de <div> y <p>.

<!--archivo HTML -->
<h1>Soy un título </h1>
<div>Soy un div</div>
<p>Soy un párrafo</p>

Desafío de combinador general de hermanos

Intenta colocar un color de letra a todos las etiquetas <p> que son hermanos de <div>.

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 214

Preguntas 51

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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>

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

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.

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.

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 “!” 😄

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.

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

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

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

MATRIZ DE COMBINADORES CSS

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


Lo super recomiendo para practicar y aprender los selectores!
https://flukeout.github.io/

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.

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>

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

Clase 8 - Tipos de selectores básicos y combinadores


¿Qué clases de selectores hay en CSS?

  • Básicos.
  • Combinadores.

¿Cuáles son los selectores básicos?

  • De tipo.
  • De clase.
  • De id.
  • De atributo.
  • Universal.

¿Cuáles son los selectores combinadores?

  • Descendiente.
  • Hijo directo.
  • Elemento adyacente.
  • General de hermanos.

¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector de tipo?

  • Lo podemos hacer usando la siguiente sintaxis dentro de nuestro archivo CSS.
  • Sintaxis
p
{
   color: blue;
   font-size: 40px;
}

  • Como vemos lo que estamos haciendo en este caso es asignarle los estilos de color y font-size a todas las etiquetas <p> de nuestro proyecto web.

¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector clase?

  • Lo primero que debemos de tener en cuenta para usar este método es que debemos escribir el atributo class al o los elementos que queremos agregarle estilos de la siguiente manera:
  • Sintaxis:
<p class="text">Texto</p>
  • Si queremos que los estilos afecten a un grupo determinado de etiquetas este es el mejor método, solo debemos de tener en cuenta de asignar el atributo class con el mismo valor a todas las etiquetas que queremos afectar.
    Luego de asignar el atributo debemos irnos a nuestro archivo CSS y usar el selector class de la siguiente manera
  • Sintaxis:
.text
{
   color: red;
}

  • Cómo vemos la manera de usar el selector class en nuestros archivos CSS es escribir un punto (.) y seguido el valor que tienen las etiquetas HTML en su atributo class.

¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector Id?

  • Lo primero que debemos de tener en cuenta para usar este método es que debemos escribir el atributo id al elemento que queremos agregarle estilos de la siguiente manera:
  • Sintaxis:
<p id="textos">Textos</p>
  • Este método solo puede afectar a un solo elemento, además no se recomienda usar porque el atributo id se debe usar en JavaScript y no con CSS.
  • Luego de asignar el atributo debemos irnos a nuestro archivo CSS y usar el selector id de la siguiente manera
  • Sintaxis:
#textos
{
   color: green;
   font-size: 24px;
}

  • Como vemos la forma de usar el selector id en nuestros archivos CSS es escribiendo el símbolo de numeral (#) y seguido de él debemos de escribir el mismo valor que escribimos en la etiqueta que queremos afectar.

¿Cómo podemos asignar estilos a una etiqueta HTML usando el selector de atributo?

  • Lo primero que debemos de tener en cuenta es el atributo y el valor que vayamos a usar como selector.
  • Sintaxis:
<a href="https://platzi.com/home">Platzi</a>
  • En este ejemplo usaremos el atributo href y su valor como selectores. Y para usarlo en CSS debemos hacerlo de la siguiente manera:
  • Sintaxis
  a[href="https://platzi.com/home"]
        {
            color: red;  
        }

  • En este ejemplo que estamos tratando de hacer es darle un color rojo a la letra de todos los elementos <a> que tenga como atributo a href y en su valor este la ruta del home de Platzi.

¿Cómo podemos usar el selector universal y cuál es su sintaxis?

  • Para usar el selector universal debemos hacerlo de la siguiente forma:
    Sintaxis:
*
        {
            background-color: papayawhip;
        }

  • Cómo vemos lo único que debemos hacer es usar el símbolo de asterisco (*) para usar este selector, pero debemos de tener en cuenta que todos los estilos que escribamos en este selector se aplicará a absolutamente todos los elementos HTML que haya en la página web.

¿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>.

¿Qué símbolo debemos de usar para utilizar el selector hijo directo?

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

¿Cómo funciona el selector hijo directo?

  • Este selector 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.

¿Qué símbolo debemos usar para utilizar el selector elemento adyacente?

  • El símbolo de más (+).

¿Cómo funciona el selector elemento adyacente?

  • Este selector nos permite agregar estilos a un elemento que tenga seguido de él el elemento que le digamos en el selector.
  • Sintaxis.
h2 + p
{
   color: red;
}
  • En este ejemplo lo que estamos haciendo es dándole a los elementos <p> que estén seguidos de un elemento <h2> el color rojo en la fuente.

¿Qué símbolo debemos de usar para utilizar el selector general de hermanos?

  • El símbolo de la virgulilla (~).

¿Cómo funciona el selector general de hermanos?

  • Este selector nos permite agregar estilos a todos los elementos que tengan como hermano el elemento que escribamos en el selector.
  • Sintaxis:
h2 ~ p
{
   color: blue;
}

  • Como vemos en este ejemplo lo que estamos haciendo es darle estilos a todos los elementos <p> que tengan como hermano un elemento <h2>, sin importar si están alejados entre ellos.

Bueno en esta clase, la explicación no es muy buena.
Creo que se podía explicar mucho mejor. El tema venía bien. Pero particularmente aquí se puede mejorar.

Con todo respeto a mi princesa Estefany, no me gustó la explicación. Se fue muy rápido en cada tema y pues obvio que no quedo claro.
Aquí si hace falta mucha mejora.
Les recomiendo que LEAN la sección de recursos en la parte de abajo de esta página. Y además hagan los desafíos que ahí mismo plantean.

que mal explica la verdad hace todo a las carreras uno está es aprendiendo

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

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

Combinadores

<!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>Selectores 2</title>

    <style>
        div p{
            color:lime;
        }
        div > div{
            background: plum;
        }
        .atributo{
            background: pink;
        }
        div + div {
            background-color: cornflowerblue;
        }
        div ~ p{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>Soy un limón</p>
            <p>Soy un aguacate</p>
            <div class="atributo">Menta</div>
        </div>
    </div>
    <div>
        Pera
    </div>
    <p>Clase nueva</p>
</body>
</html>

Selectores

<!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>Selectores 1</title>
</head>
<body>

    <style>
        *{
            background: papayawhip;
        }
        div{
            background: palegreen;
        }
        .title{
            color: palevioletred;
        }
        #title2{
            color:blue;
        }
        a[href="https://platzi.com/clases/2467-frontend-developer/40835-tipos-de-selectores-basicos-y-combinadores/"]{
            color: red;
        }
        </style>

    <div class="title">Mi primer código</div>
    <div id="title2">Dedicado a mi gato</div>
    <a href="https://platzi.com/clases/2467-frontend-developer/40835-tipos-de-selectores-basicos-y-combinadores/">Go to Basic Selector class at Platzi</a>
</body>
</html>

Esta imagen me parece genial para entender selectores

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>

Buenos dias, como le va profe? bueno siento que en esta clase para la explicacion de estos temas se queda un poco corta, a mi parecer

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:wght@300&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>

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.

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.

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!

Tipos de Selectores

Universal

/* Funciona para seleccionar todo */

* {
	color: red;
}

De Tipo

/* Funciona para lograr seleccionar y personalizar cada pedazo de codigo */

h1{
     color: aqua;
 }

Clases

/* Se puede repetir, lo que quiere decir que se lo podemos asignar a cuantos objetos
querramos  */

.parrafo{
		color:red;
}

/*Al existir una clase separada por espacios se pueden editar por separado*/

.card {
    /* Todas las etiquetas con la clase "card" */
}

.card1 {
    /* Todas las etiquetas con la clase "card1" */
}

.card2 {
    /* Todas las etiquetas con la clase "card2" */
}

ID

/* Este selector no se puede repetir lo que quiere decir que solo se lo podemos
asignar a un objeto */

#element-for-modify{
    color: brown;
 }

Por Atributo

/* Funciona para personalizar si creamos atributos */

[Atributo="Resultado"] {
			color:red;
}

Selectores combinadores

Descendientes

/*div p*/

h2 strong{
     color: blue;
 }

Hijo directo

/*div > p*/

div > .es{
    background-color: blueviolet;
}

Elemento adyasente

/*div + p*/

div + section{
    background-color: palegreen;
}

General de hermanos

/*div ~ p*/

div ~ p{
    color: aquamarine;
}

Pseudo-Clases

h1:hover{
    color: aqua;
}

Les dejo un pequeño aporte…

Alguien mas se hace la picha un lio con los div dentro del div dentro del div dentro del div? XD

Selectores Básicos:

  • De tipo -> Selecciona todos los elementos que coincidan con el nombre de la etiqueta HTML.
  • De clase -> Selecciona todos los elementos que coincidan con las etiquetas HTML que contengan el atributo class.
  • Selector de identificador único (id) -> Selecciona el único elemento que coincida con la etiqueta HTML que contenga el atributo id. Solo puede existir un valor id para todo el documento.
  • Selector de atributo -> Selecciona los elementos que coincidan con la etiqueta HTML que contenga el atributo y valor especificado.
  • Selector universal -> Selecciona todos los elementos del documento mediante un asterisco *.

Juego para aprender los tipos de selectores: https://frontend30.com/css-selectors-cheatsheet/

Muy entretenidos los retos :3

.

La teoría se entendió más que en la práctica…hubiera sido mejor otros colores diferentes para no confundir pero la idea estuvo ahí 😅. Lo bueno que en el curso de programación básica si lo explica recontra bien y ya lo llevé :’)

feliz día de los gatos!

Desafío del combinador de descendientes
Intenta colocar un color de letra a todas las etiquetas <li> que son hijos de la clase “container”.
.

.
Desafío de combinador de hijo directo
Intenta colocar un color de letra a todos las etiquetas <p> que son hijos directos de la clase “container”.
.

.
Desafío de combinador de elemento adyacente
Intenta colocar un color de letra a todos las etiquetas <p> que están adyacente a las etiquetas <div>.
.

.
Desafío de combinador general de hermanos
Intenta colocar un color de letra a todos las etiquetas <p> que son hermanos de <div>.
.

Especificidad en CSS:

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!

Mi práctica.

Styles.css

/*SELECTORES BÁSICOS*/
* {
    background: papayawhip;
}

div {
    background: pink;
}

.description {
    color: aqua;
}
/*Por ID*/
#image {
    color: brown;
}

a[href="https://www.youtube.com/c/REVITACAD/videos"] {
    color: blueviolet;
}
/*Por Clase*/
.post1 {
    background: red;
}

.post2 {
    background: blue;
}

/*SELECTORES COMBINADOS*/
/*Descendientes*/
div p {
    color: lime;
}
/*Hijo direecto*/
div > div {
    background: plum;
}
/*Div adjacent*/
div + section {
    background: brown;
}
/*General de hermanos*/
div ~ p {
    background: gray;
}

Para subir/bajar de posición código seleccionado en VS Code se utilizan las teclas ALT +(Flechita para arriba/abajo). Aquí hay unos atajos de teclado muy interesantes como el que mostró la profesora en esta clase.

Por aquí un aporte de como lo entendí yo:

Por aquí el CSS

<style>
        /*COMBINADORES DESCENDIENTES*/
        div p{
            color: lime;
        }
        /*COMBINADORES HIJO DIRECTO*/
        section > nav{
            border: 1px dotted black;
        }
        /*COMBINADORES HERMANOS*/
        table + p{
            color: red;
        }
        /*COMBINADORES GENERAL DE HERMANOS*/
        section ~ article{
            border: 1px dashed red;
        }
    </style>

Por aqui el HTML

<!-- HTML PARA SELECTORES COMBINADORES DESCENDIENTES-->
    <div>
        <p>Verdad</p>
        <p>esto es azul</p> 
        <p>Increible</p>
        <div>
            <p>muy bien</p>
        </div>
    </div>
    
    <!-- HTML PARA SELECTORES COMBINADORES HIJO DIRECTO-->
    <section>
        <nav>
            <div>
                <p>hola</p>
                <nav>menu de navegacion</nav>
            </div>
        </nav>
    </section>

    <!-- HTML PARA SELECTORES COMBINADORES ELEMENTO ADYACENTE-->
    <table>
        <tr><td>Tabla</td></tr>
    </table>
    <p>Este se pinta de rojo</p>
    <p>Este no se pinta de rojo</p>

    <!-- HTML PARA SELECTORES COMBINADORES HERMANOS-->
    <section>
        <p>Esto es el section</p>
        <article><p>Esto es el article hijo de section</p></article>
    </section>
    <article><p>Esto es el article hermano de section</p></article>
    <article><p>Esto es el article hermano de section</p></article>
Test sobre selectores en MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks

Ya lo han dejado en algunas respuestas a preguntas, lo vuelvo a recomendar, si es la primera vez que ven estos conceptos no dejen de ingresar al siguiente link y practicar:
flukeout. Les va a servir muchisimo para entender y ver en practica (mas en profundidad) lo visto en esta clase.

¿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

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>

Selectores modo sad

SELECTOR DE TIPO

SELECTOR DE CLASE

SELECTOR DE ID

SELECTOR DE ATRIBUTO

SELECTOR UNIVERSAL

COMBINADOR DE HIJO DIRECTO

COMBINADOR DE DESENDIENTES

COMBINADOR DE ELEMENTOS ADYACENTES

COMBINADOR DE HERMANOS

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

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

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

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

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

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

man, este curso esta siendo el mejor de todos, super claro, super explicado todo

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.

El div > div, todo ese div primero es rosa, y después cuando ponemos la clase es, sobreescribe el color red, quiere decir que el rosa está por detrás escondido.

Medio enredado la verdad…

Esto si que esta complicado para mi, porque a la practica se puede confundir uno cuando usa algun combinador.

no carga el video despues de 5:56

Es increíble el recurso ID

Estoy syper emocionado con este curso, voy a hacer el mejor en CSS""""

En un código con varias etiquetas HTML, los selectores sirven para darles orden y colocarlas en grupos.

Pregunta Respuesta
¿Cuál es la estructura básica de una declaración CSS? La estructura básica de una declaración CSS consiste en un selector, una propiedad, un valor y un punto y coma al final
¿Qué es un selector de tipo en CSS? Un selector así estiliza elementos específicos basados en su etiqueta HTML, como <div>, <p>, <h1>, …
¿Cómo se utiliza un selector de clase en CSS? Un selector de clase se utiliza agregando un punto seguido del nombre de la clase, como .titulo, para estilizar elementos
¿Qué es un selector de ID en CSS? Un selector de ID se utiliza para estilizar un elemento específico con un atributo de ID único, utilizando #nombreId
¿Qué hace un selector de atributo en CSS? Un selector de atributo estiliza elementos según sus atributos específicos, como a[href=" www. platzi. com "]
¿Cómo se selecciona todo en CSS usando un selector universal? Se denota con asterisco (*) y selecciona todos los elementos en la página para aplicar estilos a nivel global
¿Cuál es el propósito de los selectores combinadores en CSS? Se utilizan para apuntar a elementos específicos en función de sus relaciones con otros elementos
¿Qué hace el selector div p en CSS? El selector div p selecciona todos los elementos <p> que están dentro de un elemento <div>
¿Cómo se aplica un estilo a un hijo directo en CSS? Para aplicar un estilo a un hijo directo, se utiliza el selector div > p para seleccionar todos los párrafos directos
¿Qué hace el selector div + p en CSS? Selecciona el primer párrafo que sigue inmediatamente a un elemento <div>
¿Cómo se aplica un estilo a todos los hermanos de un elemento en CSS? El selector div ~ p selecciona todos los elementos <p> que son hermanos del mismo nivel que un <div>

Les comparto una página web que armé para practicar lo visto en clase.

<!DOCTYPE html>
<head>
    <title>Ejersicio Selectores</title>
</head>
<body>
    <!-- En cada section de este codigo se trabaja un ejercico de selectores css-->

    <head>
        <h1>Ejercicio de selectores CSS</h1>
    </head>

    <section id="selectores_universales">
        <h2> Selectores universales</h2>
        <p>Este selector inicia con * y el selector que se aplique afecta a todo el dom</p>
        <p>Casi siempre se usa para fijar el background de la página web</p>
        <p>Por ejemplo: * { background: whitesmoke}</p>
    </section>

    
    <section id="selectores_de_etiqueta">
        <h2> Selectores de etiquetas</h2>
        <p>Este selector inicia con el nombre de la etiqueta y se aplica a todas las que estén en el dom</p>
        <p>Por ejemplo: section {border:2px solid black;</p>
    </section>

           
    <section id="selectores_de_id">
        <h2> Selectores de id</h2>
        <p>Este selector inicia con el id de un objeto en el dom</p>
        <p id="parrafo_seleccionado">Por ejemplo: #parrafo_seleccionado{color: red}</p>
    </section>

    <section id="selectores_de_clase">
        <h2 class="Titulo"> Selectores de clase</h2>
        <p>Este selector inicia con la clase de los objetos que se van a modificar</p>
        <p>Por ejemplo: .Titulo{color: blue}</p>
    </section>

    <section id="selectores_de_atributo">
        <h2> Selectores de atributos</h2>
        <p>Este selector inicia con la etiqueta y atributo de un objeto dentro del dom</p>
        <p>Por ejemplo input[placeholder="Escribir input"] {border:2px solid orange;}</p>
        <input type="text" placeholder="Input con borde negro">
        <input type="text" placeholder="Input con borde naranja">
    </section>

    <section class="section_ordenado"id="Selector_cobinador_decendiente">
        <h2> Selectores combinadores decendiente</h2>
        <p>Este selector hace que todos los elementos que estén dentro del objeto padre tengan el mismo estilo</p>
        <p>Por ejemplo: .section_ordenado * {margin:20px}</p>
    </section>

    <section class="section_ordenado"id="Selector_combinador_hijo_directo">
        <h2> Selectores combinadores hijo directo</h2>
        <article>
            <p>Este selector hace que todos solo el primer hijo dentro del elemento se modifique</p>
        </article>
        <p>Por ejemplo: #Selector_combinador_hijo_directo > article {border:2px solid green;}</p>
    </section>

    <section class="section_ordenado"id="Selector_combinador_elemento_adyacente">
        <h2> Selectores combinadores elemento adyacente</h2>
        <p>Este selector hace que el elemento siguiente al objeto seleccionado se modifique</p>
        <p id="parrafo_selecionado2">Por ejemplo: #parrafo_selecionado2 + p {background-color: aqua;}</p>
        <p>Párrafo siguinte 1</p>
        <p>Párrafo siguinte 2</p> 
    </section>

    <section class="section_ordenado"id="Selector_combinador_elemento_hermano">
        <h2> Selectores combinadores elemento hermano</h2>
        <p>Este selector hace que todos los elementos siguientes al objeto seleccionado se modifiquen</p>
        <p id="parrafo_selecionado3">Por ejemplo: #parrafo_selecionado3 ~ p {background-color: gold;}</p>
        <p>Párrafo siguinte 1</p>
        <p>Párrafo siguinte 2</p>
    </section>

    <style>
        * {
            background-color: whitesmoke;
        }
        section {
            margin: 40px;
            width: 80%;
            border:2px solid black;
            border-radius: 10px;
        }
        #parrafo_seleccionado{
            color: red;
        }
        .Titulo{
            color: peru;
        }
        input[placeholder="Input con borde naranja"]{
            border:2px solid orange;
            border-radius: 10px;
        }

        .section_ordenado *{
            margin: 20px;
        }

        #Selector_combinador_hijo_directo > article {
            border:2px solid green;
            border-radius: 10px;
        }

        #parrafo_selecionado2 + p {
            background-color: aqua;
        }

        #parrafo_selecionado3 ~ p {
            background-color: gold;
        }
    </style>
</body>
</html>

tengo entendido que escribir el css en el index de HTML no es buenas practicas, el html debe escribirse en otro index u hoja de style.css

div > p : indica que estrictamente p debe ser hijo directo de div.

div p : cualquier elemento p dentro de un div. Es decir p podría a su vez ser hijo de un hijo de div lo que lo hace un hijo no directo y aun así seleccionarlo.

div + section : agrega estilos al elemento section adjacente de div. Es decir section deberia ser la siguiente etiqueta luego que se cierre el div.

div ~ p : agrega estilos a hermanos. Es decir dos o mas etiquetas que comparten el mismo padre.

  • Los selectores en CSS permiten identificar y seleccionar los elementos HTML a los que se les aplicarán las reglas de estilo. Hay varios tipos de selectores, incluidos los básicos y los combinadores. Aquí tienes una descripción de cada tipo:

  • Selectores básicos:

  • Selector de etiqueta: Selecciona elementos por el nombre de la etiqueta HTML. Por ejemplo, h1 seleccionará todos los elementos <h1>.

  • Selector de clase: Selecciona elementos por su atributo de clase. Se define utilizando un punto (.) seguido del nombre de la clase. Por ejemplo, .clase seleccionará todos los elementos con la clase “clase”.

  • Selector de ID: Selecciona elementos por su atributo de ID. Se define utilizando un numeral (#) seguido del nombre del ID. Por ejemplo, #id seleccionará el elemento con el ID “id”.

  • Selector universal: Selecciona todos los elementos en la página. Se define utilizando un asterisco (*).
    Selectores combinadores:

  • Selector descendente: Selecciona elementos que son descendientes directos o indirectos de otro elemento. Se utiliza un espacio entre los selectores. Por ejemplo, div p seleccionará todos los elementos <p> que sean descendientes de un elemento <div>.

  • Selector hijo directo: Selecciona elementos que son hijos directos de otro elemento. Se utiliza el signo mayor que (>). Por ejemplo, div > p seleccionará todos los elementos <p> que sean hijos directos de un elemento <div>.

  • Selector adyacente: Selecciona el siguiente elemento adyacente que sigue inmediatamente a otro elemento. Se utiliza el signo más (+). Por ejemplo, h1 + p seleccionará el primer elemento <p> que sigue inmediatamente a un elemento <h1>.

  • Selector hermano general: Selecciona todos los elementos hermanos que siguen a otro elemento. Se utiliza el signo de virgulilla (~). Por ejemplo, h1 ~ p seleccionará todos los elementos <p> que siguen a un elemento <h1>.

  • Estos son solo algunos ejemplos de selectores básicos y combinadores en CSS. Los selectores son una parte fundamental de CSS y permiten aplicar estilos de manera selectiva a elementos específicos o grupos de elementos en una página web.

Me encantan todos los desafíos que han puesto!

estas son las diferentes opcion de estilar los atributos de la estructura de html.

El selector de hijo directo (>) en CSS es útil cuando quieres seleccionar solo los elementos que son hijos directos de un elemento especificado, en lugar de seleccionar todos los descendientes.

Vamos a poner un ejemplo con algunos elementos HTML anidados:

<div>
    <p>Primer párrafo (hijo directo del div).</p>
    <div>
        <p>Segundo párrafo (no es hijo directo del primer div).</p>
    </div>
</div>

Ahora, si usamos el selector de hijo directo en nuestro CSS así:

div > p {
    color: red;
}

Solamente el primer párrafo (que es hijo directo del primer <div>) se coloreará de rojo. El segundo párrafo no se verá afectado porque, aunque es descendiente del primer <div>, no es un hijo directo (tiene un <div> intermedio).