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}
Se me hace mas legible o por lo menos mas fácil para mi utilizar solo selectores de tipo, clases, ID y selectores descendientes para diferenciar y manipular selectores y sus propiedades.
Los otros me incomodan un poco, siento que tendría que estar leyendo y releyendo el código para diferenciarlos por no decir que ya conocía se me hacen innecesarios utilizar los demás. Es mi parecer pero tal vez este totalmente herrado.
Hola! Dejo mi aporte, espero que les funcione.
/* 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.
buena clase, algo que agregar es la diferencia entre Class e Id, varios elementos pueden tener la misma clase pero solamente un elemento puede tener un id, no se pueden repetir, es único. ej: tenemos 1000 billetes de 100 pesos, la clase de esos billetes podría ser 100 pesos, pero el id seria el código de serie del billete ya que este es único.
El selector más práctico suele ser el de clase (.). Permite aplicar estilos a elementos específicos sin afectar a todos los de un tipo, lo que ofrece mayor control y flexibilidad en el diseño. Ideal para mantener un código limpio y organizado en CSS.
**Investigación Clase 8 - Tipos de selectores: Básicos y combinadores**
* **¿De qué formas podemos agregar CSS a nuestro HTML?**
* Inline CSS (CSS en línea).
* Internal CSS (CSS en una hoja de estilos interna).
* External CSS (CSS en una hoja de estilos externa).
* Import CSS. (CSS importado).
* **¿Cómo funciona inline CSS?**
* Para agregar CSS de esta manera lo que debemos hacer es escribir el atributo “style” dentro del elemento HTML que queramos estilizar.
* Por ejemplo:
* \
Este es un párrafo con CSS en línea\
* En este caso lo que estamos haciendo es asignar un tamaño de fuente de 16px y un color azul al texto del elemento \
.
* **¿Cuáles son las ventajas y desventajas de usar Inline CSS?**
* Ventajas:
* Fácil de usar al momento de querer agregar estilos rápidos a un elemento específico.
* No requiere de un archivo CSS externo.
* Desventajas:
* Dificulta el mantenimiento del código porque el CSS esta disperso por todo el documento HTML.
* No es eficiente en proyectos grandes o complejos, porque no se pueden reutilizar los estilos.
* **¿Cómo funciona Internal CSS?**
* Para agregar CSS de esta forma lo que debemos hacer es escribir la etiqueta \<style> dentro de la etiqueta \<head>. Los estilos que queramos aplicar debemos escribirlos dentro de la etiqueta \<style>
* Por ejemplo:
* \
* \<html lang="es">
* \<head>
* \<meta charset="UTF-8">
* \<meta name="viewport" content="width=device-width, initial-scale=1.0">
* \<title>Ejemplo con CSS Interno\</title>
* \<style>
* p {
* color: blue;
* font-size: 16px;
* }
* \</style>
* \</head>
* \<body>
* \
Este es un párrafo con CSS interno\
* \</body>
* \</html>
* En este caso lo que estamos haciendo es aplicar un color azul y un tamaño de fuente de 16px a todos los elementos \
del documento HTML.
* **¿Cuáles son las ventajas y desventajas de usar Internal CSS?**
* Ventajas:
* Organiza los estilos en un solo lugar dentro del documento HTML.
* Es útil cuando queremos aplicar estilos a una página específica.
* Desventajas:
* El CSS que escribamos bajo esta forma no será reutilizable en otras páginas web. Lo cual genera duplicación de código si el mismo estilo se aplica a múltiples páginas.
* En sitios web grandes puede hacer que el HTML sea largo y difícil de leer.
* **¿Cómo funciona External CSS?**
* Para agregar CSS de esta forma debemos de tener en cuenta que se debe crear un archivo CSS con la extensión .css y enlazarlo con nuestro documento HTML con la ayuda de la etiqueta \<link> que se escribe dentro de la etiqueta \<head>.
* Por Ejemplo:
* HTML:
* \
* \<html lang="es">
* \<head>
* \<meta charset="UTF-8">
* \<meta name="viewport" content="width=device-width, initial-scale=1.0">
* \<title>Ejemplo con CSS Externo\</title>
* \<link rel="stylesheet" href="estilos.css">
* \</head>
* \<body>
* \
Este es un párrafo con CSS externo\
* \</body>
* \</html>
*
* CSS:
* p {
* color: blue;
* font-size: 16px;
* }
* En este caso lo que estamos haciendo es agregando un tamaño de fuente de 16px y un color azul al texto de todos los elementos \
del sitio web, pero desde un archivo externo.
* **¿Cuáles son las ventajas y desventajas de usar External CSS?**
* Ventajas:
* Facilita la reutilización del CSS en múltiples páginas web.
* Mantiene el HTML limpio y separado del CSS.
* Es más fácil de mantener y actualizar, ya que todos los cambios que hagamos en el archivo CSS externo afectarán a las páginas que estén vinculadas.
* Desventajas
* Requiere de una solicitud HTTP adicional para cargar el archivo CSS, esto puede afectar el rendimiento (aunque esto se puede mitigar con técnicas como la caché).
* No es ideal para modificaciones pequeñas y rápidas que se deban hacer.
* **¿Cómo funciona Import CSS?**
* Esta es una variante del External CSS. Nos permite importar uno o varios archivos CSS a un mismo archivo CSS utilizando la regla “@import”.
* Por ejemplo:
* @import url('reset.css');
* @import url('tipografia.css');
*
* p {
* color: blue;
* font-size: 16px;
* }
* **¿Cuáles son las ventajas y desventajas de usar Import CSS?**
* Ventajas
* Permite dividir el CSS en varios archivos para tener una mejor organización.
* Facilita el mantenimiento de archivos de gran tamaño.
* Desventajas:
* Cada archivo importado genera una nueva solicitud HTTP, lo que puede hacer que la página se demore en cargar.
* No se recomienda para sitios que necesiten un alto rendimiento.
* **¿En qué momento se recomienda usar Inline CSS?**
* Cuando queramos aplicar estilos rápidamente a unos pocos elementos y nuestro sitio web sea pequeño. Si el proyecto es muy grande es mejor optar por otra opción.
* **¿En qué momento se recomienda usar Internal CSS?**
* Sí queremos aplicar estilos a una sola página y cuando el sitio web no cuenta con múltiples páginas.
* **¿En qué momento se recomienda usar External CSS?**
* Esta es la opción más aceptada en la industria ya que permite mantener el CSS separado. Esto facilita la escalabilidad y colaboración en equipo.
* **¿En qué momento se recomienda usar Import CSS?**
* Cuando se quiera organizar mejor nuestros estilos o aplicar distintas hojas de estilo a un solo proyecto.
* **¿Cuáles son las características del selector de tipo (Type selector)?**
* Aplica el estilo a todos los elementos del mismo tipo en la página.
* Es fácil de entender pero tiene menos especificidad que los otros selectores.
* **¿Cuáles son las características del selector de clase (class selector)?**
* Podemos usar la misma clase en varios elementos diferentes.
* Es útil cuando queremos aplicar el mismo estilo a distintos tipos de elementos HTML.
* **¿Cuáles son las características del selector de ID (ID selector)?**
* El ID que usemos debe ser único en la página.
* Tiene una mayor especificidad que un selector de clase.
* Es útil cuando queremos aplicar estilos a un único elemento.
* **¿Cuáles son las características del selector universal?**
* Cualquier estilo que apliquemos con este selector serÁ aplicado a todos los elementos del documento HTML
* Se debe usar con cuidado ya que podría hacer que aplicar estilos a otros elementos se complique.
* **¿Cuáles son las características del selector de atributo (Attribute selector)?**
* Permite seleccionar elementos HTML a partir de sus atributos o valores de los atributos.
* Es útil cuando queremos estilizar formularios.
* **¿Cuáles son las características del selector descendiente (Descendant Selector)?**
* Permite aplicar estilos de forma más precisa a elementos dentro de otros elementos.
* Es muy útil para estilos jerárquicos en un documento HTML con una estructura compleja.
* **¿Cuáles son las características del selector de hijo directo (Child Selector)?**
* Selecciona solo a los hijos inmediatos.
* Permite aplicar estilos únicamente a elementos en un nivel específico dentro de la estructura HTML.
* Tiene una especificidad moderada.
* **¿Cuáles son las características del selector de elemento adyacente (Adjacent Sibling)?**
* Selecciona únicamente al siguiente hermano inmediato, es decir al segundo elemento.
* Al usarlo debemos de tener en cuenta que ambos elementos hermanos pertenecen al mismo elemento padre.
* Es útil cuando queremos aplicar estilos a elementos consecutivos.
* Tiene una especificidad baja.
* **¿Cuáles son las características del selector general de hermanos (General Siblings)?**
* Selecciona a todos los hermanos posteriores. Es decir selecciona a elementos que van después del primer elemento en la misma jerarquía
* Tienen una especificidad baja
* Es útil cuando queremos aplicar estilos a elementos que tengan la misma jerarquía.
No me gustó la explicación, creo que hasta ella misma se entreveró y terminó incluyendo un atributo class que no venia al caso en esta explicacación, dio más importancia a que le funcione lo que quería mostrar que a hacerlo correctamente y que se entienda.
Esta es mi página y es genial
Hacer páginas web es difícil, pero divertido y todos deberíamos poder hacer nuestras páginas.
Esta página está hecha para practicar y ser mejor cada día.
A mí me gusta diseñar, dibujar y ser creativa.
Esta es mi página y es \genial\\ Hacer páginas web es difícil, pero divertido y todos deberíamos poder hacer nuestras páginas.\ Esta página está hecha para practicar y ser mejor cada día.\ A mí me gusta \ diseñar, dibujar y ser creativa. \ \
Hay mucha area de oportunidad en este curso, me sorprende que para ser clases asíncronas no se preparen mejores ejemplos que vayan construyendo y relacionando distintos conceptos tan fundamentales de css de manera lineal, esta rodeado de malas prácticas que se justifican en pos de "es solo para el ejemplo", cuando perfectamente se podría dar un buen ejemplo con buenas prácticas y más coherentes, hay cursos que ya no estan, y en general otros cursos de los cuales este y otros más podrian aprender bastante.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?