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 */
}
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.
Selecciona todos los elementos que coincidan con las etiquetas HTML que contengan el atributo class.
<!--archivo HTML--><divclass="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--><divclass="card card1"> Soy una carta </div><divclass="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"
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.
Un selector combinador es la unión de dos o más selectores básicos.
selector1selector2selector3 {
/* Estilos */
}
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.
padrehijos {
/* Todos los hijos del padre */
}
divp{
/* Todos los hijos <p> de <div>*/
}
.containerimg{
/* 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".
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".
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>.
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>.
Ahora que ya entendemos los selectores básicos, vienen los combinadores, que realmente nos ayudan a ser muchos más específicos 👀.
.
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 😄.
.
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> 😄.
Elemento adyacente: Básicamente selecciona a la etiqueta que esté debajo de la primera etiqueta 👀.
.
.
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
.
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.
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.
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.
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”.
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”.
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.
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: divp { 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 */
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.
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.
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>
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:
<pclass="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:
<pid="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:
<ahref="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:
divp
{
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.
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
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
Dejo mi ejemplo. Tal vez a alguien le sirva entenderlo cómo yo lo entendí. Saludos mis estimados Frontend developers 😄
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* Descendientes */divp{
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>
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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>A5-C8</title><!--Esta fuente la tomé de fonts.google.com--><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="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><h1class="Header1">A5 - C8</h1></div><div><h2class="Header2">Clase 8 | parte 2</h2></div><div><h3class="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><liclass="listitem">Selectores descendientes</li><section><pclass="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><imgsrc="https://static.platzi.com/media/user_upload/carbon%20%288%29-2f40be2f-b500-45ba-b640-0fa77a19e6d9.jpg"alt="Example1"height="100"><pclass="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 <spanstyle="color: #bb4040;"> clase </span> .rojito, <spanstyle="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><liclass="listitem">Hijo directo</li><section><pclass="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><imgsrc="https://static.platzi.com/media/user_upload/carbon%20%2811%29-5e9b9bbe-64e9-4210-9c64-de62874fc8c4.jpg"alt="ExampleB1"height="100"><pclass="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><imgsrc="https://static.platzi.com/media/user_upload/carbon%20%2812%29-bb3cebd4-4d9b-4c1b-86be-2b09e4b9bfb4.jpg"alt="ExampleB2"height="200"><pclass="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><liclass="listitem">elemento adyacente</li><section><pclass="pA">
Basicamente selecciona a la etiqueta que esté debajo de la primera etiqueta
</p><imgsrc="https://static.platzi.com/media/user_upload/carbon%20%2814%29-91dc5df7-44b3-4bce-b1a7-860696b3c6ce.jpg"alt="ExampleC1"height="100"><imgsrc="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><liclass="listitem">General de hermanos</li><section><pclass="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><imgsrc="https://static.platzi.com/media/user_upload/carbon%20%2815%29-1c6c80d5-7927-4e58-8345-0c62c80a6aca.jpg"alt="ExampleD1"height="200"><pclass="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>
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: divp { 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}
/* 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;
}
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 *.
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é :’)
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!
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.
<!-- 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>
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.
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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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 ><spanclass="rojito">Hola, esta es una prueba</span><section><spanclass="rojito">Esta es otra prueba</span></section></div><div><spanclass="azulito">Esto es otro div</span><spanclass="azulito">,otro texto dentro del mismo div</span><spanclass="azulito">,otro texto mas dentro del mismo div</span></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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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" */divh2{
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")--><imgsrc="https://images.pexels.com/photos/4588458/pexels-photo-4588458.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"alt="cat"></section><!-- Formulario --><formaction=""><labelfor="name">Name: </label><inputtype="text"id="name"></form><!-- anchor (enlace para otras páginas) --><ahref="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" --><divclass="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" --><divid="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 --><ahref="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
Estaba haciendo experimentos para saber cual tipo de selector básico tenía la prioridad sobre los otros y me encontré con esto 🤯:
Universal: * { . . . }
De tipo: (elemento) { . . . }
De atributo: a[href="…"] { . . . }
De clase: .(elemento) { . . . }
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
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 😄
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.
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><sectionid="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><sectionid="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><sectionid="selectores_de_id"><h2> Selectores de id</h2><p>Este selector inicia con el id de un objeto en el dom</p><pid="parrafo_seleccionado">Por ejemplo: #parrafo_seleccionado{color: red}</p></section><sectionid="selectores_de_clase"><h2class="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><sectionid="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><inputtype="text"placeholder="Input con borde negro"><inputtype="text"placeholder="Input con borde naranja"></section><sectionclass="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><sectionclass="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><sectionclass="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><pid="parrafo_selecionado2">Por ejemplo: #parrafo_selecionado2 + p {background-color: aqua;}</p><p>Párrafo siguinte 1</p><p>Párrafo siguinte 2</p></section><sectionclass="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><pid="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>
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.
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 deldiv).</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).
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.