En este video vamos a repasar una solución al conjunto de problemas de selectores de CSSA.
Y voy a repasar todos los problemas de arriba hacia abajo.
Así que siéntase libre de avanzar si solo hay uno o dos con los que tuvo problemas.
Así que hicimos el primero juntos en el video inicial para darle al elemento del cuerpo un fondo de este color.
Entonces solo decimos que el fondo del cuerpo es este color salvo para nosotros.
Vámonos y carguemos en la actualización del navegador para que veamos que tenemos un fondo gris.
Entonces el siguiente es hacer el elemento H uno de este color.
Lo mismo, excepto en lugar de fondo, simplemente dijimos color.
Ahorramos inheres o H-1 se vuelve violeta.
Recuerde que si tuviéramos más de un H-1 en la página, todos serían de color púrpura.
Así que este próximo es hacer que todos los elementos H-2 sean anaranjados.
Tan exacto mismo selector como los dos anteriores.
Y luego para que sea naranja, solo voy a usar el color naranja incorporado, pero podrías usar cualquier otro
sistema de color y puedes ver que tenemos cada edad para esos cuatro.
Se vuelven naranja.
Así que, a continuación, cambiaremos esto a un lado para que todos los elementos aliados se vuelvan azules.
Elige tu propio azul hexadecimal.
Para eso seleccionamos todos los aliados y luego les damos un color y vamos a hacer un
azul hexadecimal.
Así que puedes poner algo aquí siempre que sea más azul que cualquier otra cosa.
Así que recuerda que el primer canal es rojo y los siguientes dos son verdes.
Así que haremos un poco de verde y luego un montón de azul.
Guarda eso y echemos un vistazo a los Aliados y puedes ver que obtenemos luces azules.
Entonces, cambie el fondo en cada párrafo para que sea amarillo.
Es solo uno más donde seleccionamos cada elemento de un tipo.
Entonces todos los párrafos de fondo amarillo guardan y obtenemos un montón de párrafos amarillos.
A continuación, seleccione todas las entradas y asígneles un borde rojo de tres píxeles.
Entonces, ingrese el borde y hay algunas maneras de hacerlo, podemos hacerlo todo de una vez.
Ordene tres píxeles de color rojo
sólido y podrá ver que nuestras dos entradas tienen un prefijo o un borde rojo sólido o
podríamos hacer esto por
separado. El borde rojo del color del borde es de tres píxeles y finalmente el estilo del borde es sólido por razones bastante obvias.
Es mucho más fácil hacer esto.
Pero ocasionalmente querrá hacer esto cuando llegue a javascript.
Solo queremos actualizar una parte.
Entonces, cuando un usuario pasa el mouse sobre algo, quiere cambiarlo de un borde rojo a un borde verde.
Bueno, es posible que solo deseemos cambiar el color y podemos dejar el estilo como están.
Así que voy a dejarlo así.
A continuación, ahora nos movemos al selector de clases.
Así que dale todo a la clase Hola.
Un fondo blanco.
Y si miramos el ht m l, en realidad hay una sola cosa.
Este primer párrafo dentro de este div con clase.
Hola.
Entonces seleccionamos ese punto de clase.
Hola fondo blanco.
Y pueden ver que tenemos este párrafo aquí.
Se pone blanco.
A continuación, brinde al elemento con ID especial un borde azul sólido de dos píxeles.
Elige tu propia R. GRAMO. se azul.
Lo mismo esta vez, en vez de un punto, usamos el signo de almohadilla o el arco para Thorpe
y luego el nombre de la ID que puede ver nuevamente está aquí. Id especial.
Y luego queremos darle un borde sólido de dos píxeles para que se convierta en un píxel sólido y luego en R. GRAMO. se azul.
Y así tendremos 0 rojo 100 verde 200 azul y si estamos frescos que puedes ver que obtenemos es bastante leve pero
un borde azul de 2 píxeles alrededor de este párrafo con la ID.
de la fuente divs de 25 píxeles y la sugerencia es usar esta fuente de propiedad Dasch size 25 píxeles.
A continuación, haga todos los párrafos que están anidados dentro
Entonces, lo que tenemos que hacer aquí es, en lugar de seleccionar todos los párrafos, que solo queremos los párrafos
que están dentro de un div para que pueda ver que hay algunos como este que no están dentro de un div.
No queremos que tengan 25 píxeles de tamaño de fuente.
luego dentro de ese div todos los párrafos para que los párrafos que viven en cualquier div no importen qué div
solo cualquier párrafo en cualquier divs los seleccionará y les dará un tamaño de fuente de 25 píxeles excepto esa
actualización y puedes ver que todos estos se vuelven más grandes, pero estos que dicen que el párrafo no está dentro de un div no se agrandan porque no
están en lugar de un div. El siguiente paso solo hace que las entradas con texto tipo tengan un fondo gris.
Entonces usamos este selector de descendientes donde decimos div y
Entonces este es otro tipo de selector y está basado en un atributo.
Entonces, el atributo que desea hacer es buscar donde el tipo es igual al texto.
Así que, básicamente, solo esta entrada aquí escribe type equal text.
Y entonces, de la manera en que lo hacemos, vamos a escribir entrada y luego llaves cuadradas y sip llaves cuadradas.
Y luego, dentro de allí, el atributo que es tipo y estamos buscando dónde
es igual al texto y luego solo diremos gris de fondo.
Y luego, si nos desplazamos hacia abajo y actualizamos la vista, aquí puede ver que tenemos un fondo gris.
Entonces, de nuevo, esto es útil si desea que seleccione todos los enlaces que fueron a Google.
Seleccionamos basado fuera de H. F. o podríamos seleccionar fuera de cualquier otro atributo por ahí.
Así que el próximo da a los dos párrafos dentro del tercer div un fondo rosa.
Entonces este se vuelve un poco loco.
Así que echemos un vistazo a la HMO.
Aquí está nuestro tercer div. El primero está aquí.
El segundo está aquí y
el tercero está aquí y hay dos párrafos y queremos seleccionarlos y darles un fondo rosa.
Entonces, lo que hicimos antes fue seleccionar todos los párrafos dentro de todos los divs que no funcionarán aquí.
Lo que hacemos, lo que queremos hacer es seleccionar todos los párrafos dentro del tercer div en la página.
Y la forma en que podemos especificar el tercer div es usar el fin del tipo.
Entonces diremos div y de tipo 3.
Así que eso nos dará un tercer div y luego, en vez de eso, todos los párrafos, y luego
vamos a decir que el fondo es de color rosa y guardaremos la actualización y volvamos a verificar.
Aquí está nuestro primer div.
Aquí está el segundo div.
Y aquí está el tercer div.
Comienza a comenzar el párrafo con un cardigan y yo soy el segundo párrafo.
Ahi vamos rebeca
Soy el segundo párrafo.
Luego dale a este segundo párrafo dentro del tercer div un borde blanco de cinco píxeles.
Entonces este es muy similar, excepto que solo queremos el segundo párrafo dentro del tercer div.
Así que solo este.
párrafo y un tipo.
Entonces hacemos lo mismo donde seleccionamos el tercer div y el tipo 3 y luego, en lugar de todos los párrafos, vamos a hacer un
Y queremos el segundo para que podamos combinarlos.
Esto seleccionará el segundo párrafo en lugar del
tercer div y queremos darle un borde blanco de 5 píxeles blanco sólido de 5 píxeles.
Aquí vamos.
Aquí está nuestro borde blanco sólido de cinco píxeles en el segundo párrafo en el div.
No el primero.
A continuación, haga que la E-M en el tercer elemento div sea blanca y la fuente de 20 píxeles.
Así que ese es este E-M aquí, cronut skateboard.
Si no conoces a Krown, es muy delicioso.
Quizás sobrevalorado.
Definitivamente, pasteles caros fuera de la ciudad de Nueva York.
Tiene un donut y un croissant.
Así que definitivamente en casa en lugar del vocabulario ipsum hipster aquí.
Y vamos a tomar ese E-M y lo vamos a hacer blanco y Swan de 20 píxeles.
que seleccionar el tercer div 3 y luego solo el E-M adentro.
Así que al igual que antes
teníamos
Y esto seleccionará todos los IEM y simplemente sucede que solo hay uno.
Pero si hubiera más de uno, podríamos decir E-M
primero de tipo o E-M en lugar de un párrafo, pero lo dejaré así por ahora.
Y queremos darle color blanco a color y 20 píxeles de color de fuente blanco y tamaño de fuente de 20 píxeles.
Y solo para recordarles que vamos a pasar un tiempo hablando sobre las fuentes y el tamaño de
letra y un montón de otras cosas en futuros videos.
Aquí vamos.
Es blanco y el tamaño de la fuente cambia.
Así que ahora estamos en algunos de los ejercicios de bonificación que son algunos de mis favoritos.
Hay algunas de las más oscuras formas más interesantes de seleccionar cosas y manipularlas.
Entonces para comenzar.
Veamos cómo hacer que todas las casillas marcadas tengan un margen izquierdo de 50 píxeles y se las di.
Debe usar el margen izquierdo para 50 píxeles.
Entonces, hay un selector para seleccionar los elementos que están marcados.
Y solo se ve así.
Es un pseudo selector al igual que enésimo de tipo.
Entonces, tenemos que decir que lo que estamos buscando ha sido verificado.
Así que solo voy a decir todas las entradas que han sido revisadas
porque recuerde que las casillas de verificación son de tipo entrada casilla de verificación, hay otros elementos que se pueden revisar aunque principalmente el botón de opción.
Así que esto también seleccionaría cualquier botón de radio que haya sido verificado y que está bien por ahora.
Entonces parece que esta entrada de colon marcada.
Y lo que queremos hacer es usar un margen de cincuenta píxeles.
Así que esta es una pequeña vista previa de lo que vamos a
encontrar en algunos de los videos futuros cuando lo agreguemos y agregará algo de espacio
en el lado izquierdo de la casilla de verificación para que pueda ver los que están marcados.
Ahora si compruebo esto ahora esto está marcado y se mueve hacia la derecha 50 píxeles.
Si los desactivo y vuelvo a la izquierda.
Así que eso está marcado.
El siguiente.
Este es probablemente mi favorito.
Haga que los elementos de la etiqueta estén en mayúsculas sin cambiar la HMO.
Así que mencioné que definitivamente querrás mirar eso
y eso es porque definitivamente no hemos analizado esto.
Entonces, para empezar, seleccionamos
todos los elementos de la etiqueta y luego digamos que no sé cómo hacerlos en mayúsculas sin cambiar la HMO.
Así que vamos a buscar a Google y hacer una búsqueda, y esto es algo que definitivamente había hecho antes.
Así que vamos a subir y hacer una búsqueda ver evaluar mayúsculas, puedes ver
que lo primero que aparece es la transformación de texto y la transformación de texto, dice que especifica cómo capitalizar el texto de los elementos.
Se puede usar para hacer que el texto aparezca en mayúsculas o minúsculas o con cada palabra en mayúscula.
Entonces nos desplazamos hacia abajo y echamos un vistazo a la sintaxis y parece que hemos capitalizado.
¿Será la primera letra del capitalista mayúscula y minúscula?
Entonces queremos mayúsculas.
Entonces el texto se transforma en mayúscula.
Y lo que acabo de hacer no fue solo
mostrarle algo, es algo que hago todo el tiempo y que está buscando
cosas para ir a Google escribiendo C Ss, bla, bla, bla, CSSA, mayúscula C S S transparente todo lo que estoy buscando hacer.
Y solo miro los resultados de búsqueda porque hay tantas propiedades para recordar.
No puedes recordarlos a todos.
Entonces este es uno de los más oscuros.
Seguro.
Y si actualizamos esto, es para las etiquetas que están aquí abajo.
Así que déjenme deshacerme de eso solo para mostrarles nuestro tiempo.
Estas son las etiquetas.
Y luego agregamos esto y refrescamos su caja superior.
Así que, a continuación, haremos la primera letra del elemento con ID verde especial y tamaño de fuente de 100 píxeles.
Así que para apuntar a la primera letra que es otra que quizás
deseemos buscar, escríbanos la primera letra y vea lo que obtenemos.
Entonces parece que hay otro pseudo selector.
La primera letra del elemento C Ss selecciona la primera letra de la primera línea de un bloque.
Entonces, si miras una primera carta de ejemplo.
Vamos a intentar eso.
Queremos primero seleccionar el ID especial y luego primero la letra de eso.
Y queremos que sea verde y 100 píxeles en el tamaño de fuente,
por lo que el color verde y el tamaño de letra de 100 píxeles se guardan y ese elemento está aquí.
Así que estén atentos a la primera carta que refresquemos y obtenemos este gigante ojo verde.
A continuación, haga que el color de los elementos H-1 cambie a azul cuando esté sobrevolado.
Entonces este es bastante común tener algún tipo de efecto.
Cuando pasas el mouse por encima de algo generalmente es bastante sutil, tal vez
un botón y pasas sobre él y hay una pequeña sombra que parece que el color cambia ligeramente para que parezca
que conoces algún tipo de perspectiva tridimensional para que algo te brinde un poco un poco de interactividad sin distraerse distrayendo.
Así que vamos a seleccionar el H-1 Y en realidad esto es todo para cada uno.
Pero en este caso, es solo uno y el pseudo selector está
suspendido y todo lo que ponemos aquí solo se aplica cuando un usuario se desplaza sobre el elemento.
Así que colorea el azul que guardamos.
Aquí está nuestro H-1.
Y si sobrevuelo se vuelve azul cuando dejo de moverse, vuelve a ser lo que tenía antes.
Así que finalmente hacen que los elementos que se han visitado se vuelvan grises y, como puede ver
los dos elementos, estos dos enlaces en realidad son enlaces a Facebook, que son enlaces que he visitado anteriormente.
Por eso son de color púrpura Chrome por defecto hará que todos los visitados piensen púrpura.
Así que pongamos un enlace en el que definitivamente no he estado antes y que solo
hará que algo empiece y te mostraré que actualices la página.
Ahora es azul
Porque no he estado allí.
Así que dejémoslo así por ahora, no voy a hacer clic en él.
Y queremos que los visitados sean de color púrpura en lugar de.
Lo siento, queremos que los visitados sean grises en lugar de morados.
Así que seleccionamos una etiqueta que los pseudo selectores llamaron visitados y luego vamos a hacer que sea gris guardar.
Y si refrescamos
Mantén tu ojo en este aquí.
Voy a hacer que la fuente sea un poco más grande.
Actualmente está morado porque estuve allí antes de actualizar.
Ahora es genial.
OK, así que espero que hayas disfrutado ese ejercicio.
Hay mucho que desempacar allí.
Una gran cantidad de selectores diferentes.
Y una cosa que agregaré es
que por cada solución que tengo o casi todas hay al menos una o dos formas más de lograr exactamente el mismo resultado.
Entonces, si tuviste algo que difiere de mí, pero funcionó, eso es genial.
Siéntase libre de agregar en los comentarios.
Compártalo con otras personas.
Es totalmente válido
Esta es solo la forma en que lo habría hecho.
Otra cosa.
Obviamente, el sitio no es particularmente atractivo.
Este no es un sitio real.
Trabajaremos en un proyecto real muy pronto en el siguiente video de ejercicios.
En realidad vamos a hacer un pequeño sitio de blog que esté un poco mejor diseñado.
Se ve mucho mejor que esto.
Esto es más solo un ejercicio de práctica.