Selectores de CSS: domina la clave para diseñar cualquier sitio web

1. INTRODUCCIÓN: Hola, y bienvenidos a este tutorial sobre selectores CSS. Si alguna vez has querido que tus páginas web se vean mejor, cambiar el estilo de los botones, encabezados o incluso secciones enteras, entonces los selectores CSS son tu Los selectores CSS son la base de cada sitio web elegante Soy Sant Kumar, y hoy vamos a explorar cómo selectores CSS te permiten apuntar exactamente a los elementos que deseas, transformando HTML plano en hermosas experiencias atractivas Por ejemplo, tenemos este diseño web. Si cambio el color en el selector raíz, verás que todo el texto y los colores de los botones actualizan con un solo cambio. Esa es la magia de los selectores CSS. Podemos crear una animación de línea de fondo usando el pseudo elemento after, oscurecer y difuminar el fondo así Aumenta el tamaño de la primera letra así, tablas de estilo y haz mucho más. Los selectores CSS facilitan la mejora y control de su diseño web con solo unas pocas líneas de código En esta serie, desglosaremos qué son los selectores, cómo funcionan y te mostraremos ejemplos reales para ayudarte a entender cada tipo Tanto si eres principiante si buscas repasar tus habilidades, este tutorial te dará la confianza para usar selectores CSS en tus propios proyectos Así que comencemos y desbloqueemos los secretos de los selectores CSS 2. Lo que debes saber: Hola, y bienvenidos. Antes de profundizar en los selectores CSS, es importante sentar una base sólida En esta sección, voy a compartir las cosas clave que debes saber para que tu viaje de selector CSS sea suave y fácil de entender. Empecemos. Primero, la comprensión básica de HTML, CSS tiene que ver con el estilo HTML, por lo que debe tener un conocimiento básico de las etiquetas HTML como encabezados, párrafos, divs, spans, listas, enlaces e imágenes Asegúrate de estar cómodo leyendo código HTML y entendiendo cómo se anidan los elementos uno dentro del otro Segundo, ¿qué es CSS? Sepa que CSS significa hojas de estilo en cascada. CSS se usa para agregar estilos como colores, fuentes, espaciado y diseño a sus páginas web, cómo funciona CSS con HTML Entiende cómo se puede agregar CSS a HTML usando una hoja de estilo externa, bloque de estilo interno o estilos en línea. Tener una idea general de qué son los selectores y por qué importan Con esta base, estarás listo para aprender todo sobre los selectores CSS en detalle 3. Tipos de selectores CSS: Serie, voy a cubrir algunos tipos principales de selectores CSS. Selectores simples, elemento, clase, ID, universal, selectores combinadores, descendiente, hijo, hermano adyacente, hermano general, selectores de atributos, pseudo clases y pseudo elementos. Este es un ejemplo sencillo de CSS. P es el selector. Se dirige a todas las etiquetas P y define qué elemento HTML quieres darle estilo. El color y el tamaño de fuente son propiedades, mientras que el azul y 18 píxeles son sus valores. La parte dentro de las llaves en la que escribes los estilos se llama bloque de declaración Cada línea es una declaración y siempre termina con punto y coma 4. Editor de archivos de código CSS: Edita archivos HTML y CSS, voy a usar CodePen como editor Es gratis y fácil de usar. Simplemente haga clic en el botón Iniciar sesión para iniciar sesión. O si no tienes una cuenta, simplemente regístrate. Después de iniciar sesión, verá la interfaz predeterminada. Ahora, haga clic en su trabajo, luego cree e inicie un nuevo bolígrafo. También puede hacer clic en este botón para cambiar el diseño de la interfaz. Ahora puedes pegar tu código aquí y empezar a trabajar. 5. Selectores simples: En esta sesión, exploraremos tres tipos de simples en selectores de elementos CSS, selectores clase y selectores Cada selector tiene un papel específico en la orientación de elementos HTML, haciendo que su diseño web sea flexible y potente. Vamos a sumergirnos y entender cada selector con explicaciones claras y ejemplos prácticos. El selector de elementos también se llama selector de tipo. Se utiliza para seleccionar elementos HTML como artículo, sección, encabezado, pie de página, encabezados y etiquetas de párrafo en función de su nombre de etiqueta Simplemente escribe el nombre de la etiqueta HTML a la que quieres apuntar. Por ejemplo, aquí tenemos múltiples párrafos y encabezamientos. Si quieres aplicar estilo a todas las etiquetas de párrafo en tu HTML, entonces usas el selector P. Aquí, puedes establecer el color en azul y el tamaño de fuente en 22 píxeles. Cada párrafo de tu HTML se volverá azul y tendrá un tamaño de fuente de 22 píxeles. No es necesario agregar ninguna clase o identificación a sus párrafos. Solo usa el nombre de la etiqueta en sí. Los selectores de elementos tienen la especificidad más baja, casos de uso comunes, estableciendo un tamaño de fuente predeterminado para todos los encabezados, H uno, H dos, etcétera, estilizando todas las etiquetas de anclaje de la misma manera, aplicando un estilo base a todas las imágenes, es decir, todas las etiquetas IMG, el selector de clase se usa cuando se desea estilo a múltiples elementos de la misma manera, pero no necesariamente todos los elementos de un tipo. Asigna un nombre de clase a uno o más elementos en tu HTML, luego usas punto antes del nombre de clase en tu CSS. Por ejemplo, en el código. Tenemos varios párrafos, encabezados y un elemento span He aplicado un color rojo a algunos párrafos y al elemento span. Ahora en CSS, establecí el valor del color en rojo, y se puede ver que todos estos elementos se han vuelto rojos. Los selectores de clase se pueden usar en cualquier elemento HTML, no solo en párrafos Usa clases cuando necesites el mismo estilo en diferentes tipos de etiquetas. También puedes agregar más de una clase a un elemento si quieres. Los selectores de clase son más específicos que los selectores de elementos. El selector de ID se utiliza para apuntar a un elemento único en la página. Los ID deben ser únicos dentro de un documento HTML. Puedes usar cada ID solo una vez por página. Los selectores de ID son más específicos que los selectores de clase y elementos En CSS, use un símbolo hash antes del nombre de ID. Por ejemplo, si agrego un ID a una etiqueta de encabezado, entonces puedo establecer su color en verde en el CSS y el encabezado se volverá verde. Aquí hay algunos consejos para usar IDs. Usa ID para elementos como encabezados principales, barras de navegación o botones únicos. No use el mismo ID en más de un elemento. Los ID se utilizan a menudo tanto para JavaScript como para CSS. Vamos a recapitular rápidamente. Selector de elementos apunta a todos los elementos de una etiqueta específica como párrafo, encabezado, ancla, etcétera selector de clase se dirige a todos los elementos con una clase específica usando un punto y el nombre de la clase. selector de ID se dirige a un elemento único con un ID específico usando un hash y el nombre de ID. Dominar estos selectores simples es el primer paso para escribir CSS limpio y efectivo y construir hermosos 6. Selector de grupo: En esta lección, aprenderemos sobre el selector de grupos CSS, una forma muy práctica de diseñar múltiples elementos a la vez sin repetir código. Al final, sabrás cómo usar el selector de grupo de manera eficiente en tus proyectos web. ¿Qué es un selector de grupo? Un selector de grupo en CSS le permite aplicar las mismas reglas de estilo a múltiples selectores al mismo tiempo Esto significa que en lugar de escribir el mismo código CSS para cada elemento por separado, puedes agruparlos, ahorrando tiempo y haciendo que tu CSS sea más limpio y fácil de mantener. Cómo escribir un selector de grupo. Se crea un selector de grupo separando varios selectores con comas Por ejemplo, en el código, tenemos múltiples encabezados como H dos, H tres, H cuatro, así como varios párrafos, un botón y un elemento span He agregado un ID a uno de los encabezados, un nombre de clase al botón, un nombre de clase llamado highlight to the span y otro nombre de clase llamado notice to the last paragraph Primero, agrupemos los selectores de elementos. Si queremos que todos los encabezados sean verdes en el CSS, escriba H dos, H tres, H cuatro y establezca el color en verde Ahora, todos esos encabezamientos aparecerán en verde. Siguiente para selectores de clase. Si queremos que el botón, el span, y el último párrafo tengan texto rojo, escriba la clase separada por comas y establezca el color en rojo Ahora, tenemos esos elementos en texto rojo. Ahora, agruparemos a todos los selectores. Escribir aviso de punto y coma por hora. Encabezar el color y establecer el tamaño de fuente en 30 píxeles. Ahora, puedes ver que el encabezado H four, el párrafo con la clase notice y el encabezado principal con el ID de color de encabezado tienen un tamaño de fuente de 30 píxeles cuando usar un selector de grupo, cuando quieres aplicar el mismo estilo a múltiples elementos o clases para mantener tu CSS más corto, limpio y más fácil de leer al diseñar encabezados, botones o secciones consistentes , consejos mejores prácticas Utilice siempre comas para separar los selectores en un grupo Asegúrate de que no haya erráticos. Una coma faltante puede romper tu CSS. Utilice selectores de grupo para reducir la duplicación de código y realizar cambios más rápido Eso es todo para el selector de grupos en CSS. Es una manera simple pero poderosa mantener su código limpio y eficiente. Practica agrupando diferentes selectores en tu próximo proyecto y observa cuánto más rápido puedes aplicar estilo a tus páginas En la siguiente lección, exploraremos los selectores compuestos. 7. Selectores compuestos: Regresa. En esta lección, aprenderemos sobre los selectores compuestos, cómo usarlos y por qué son tan importantes para escribir CSS limpio, potente y preciso Al final, sabrás cómo seleccionar elementos basados en una combinación de su etiqueta, clase e ID a la vez. ¿Qué son los selectores compuestos? Un selector compuesto es una forma de apuntar a elementos HTML que coinciden con múltiples selectores simples al mismo tiempo En lugar de simplemente usar una clase de elemento o selector de ID por sí mismo, los combinas sin espacios. Los selectores compuestos son poderosos porque te dejan ser muy específicos Cómo escribir selectores compuestos. Un selector compuesto se realiza escribiendo dos o más selectores simples juntos sin espacio entre ellos El elemento al que se dirige debe coincidir con todas las partes del selector. Por ejemplo, en el código, tenemos H dos y H tres encabezados, dos párrafos y un botón Creé una clase llamada primaria en el CSS y la apliqué a ambos encabezados y al botón Entonces ahora mismo, el texto de los encabezamientos y el botón es azul Pero ahora, digamos que queremos cambiar el color del texto de solo el encabezado H tres y el botón sin agregar ninguna clase extra o ID en el código HTML. En esta situación, utilizamos selectores compuestos. Para el encabezado H tres, escriba h tres puntos primarios en el CSS y establezca el color en verde. Ahora, sólo la H tres con la clase primaria será verde. Siguiente para cambiar el color del texto del botón. Botón derecho, punto primario en el CSS y establecer el color en rojo. Ahora, el botón con la clase primaria tendrá texto rojo. De esta manera, puedes apuntar a elementos específicos con una clase particular usando selectores compuestos ¿Por qué usar selectores de compuestos? Precisión. Apunte exactamente a lo que quieras. Ni más ni menos. Evita conflictos. Los estilos solo se aplican a los elementos a los que te refieres. Código más limpio, menos necesidad clases adicionales o ID en tu HTML. Utilízalo por especificidad, ideal para cuando necesites estilos muy específicos, pero no abuses para todo Un selector compuesto apunta elementos que coinciden con todos los selectores simples enumerados como un elemento con una clase específica o varias clases juntas Te ayuda a diseñar tus páginas web con más control y precisión. Eso es todo para los selectores compuestos en CSS. Experimenta con diferentes combinaciones para ver lo poderosas que pueden ser. 8. Selector universal: El selector universal en CSS está representado por un asterisco. Se dirige a cada elemento de la página, sin importar cuál sea la etiqueta, clase o ID de elementos . Piense en el selector Universal como un comodín que dice, seleccione todos los elementos del documento Típico usa reinicio de CSS, borrar los márgenes y rellenos predeterminados del navegador para un diseño consistente, aplicar estilos globales como establecer una fuente predeterminada o tamaño de caja, depurar, probar rápidamente un estilo en cada elemento Por ejemplo, podemos restablecer todos los márgenes y rellenos para todos los elementos a cero Y también establece el tamaño de la caja, punto y coma del cuadro de borde de dos puntos para cada elemento, lo que facilita el control de los diseños Escribe un selector de asterisco en CSS y establece margen cero relleno cero, y el tamaño de la caja Y establece el margen y relleno de todos los elementos en cero. Ahora, tal vez se esté preguntando que podemos usar esta regla con el elemento body. Si aplicamos estos estilos al selector de cuerpo, solo afectarán al elemento del cuerpo en sí. Esto significa que no afecta a otros elementos como inmersiones, encabezamientos o párrafos dentro del cuerpo Déjame explicarte si agregas borde dos píxeles rojo sólido al cuerpo en tu CSS, verás un borde rojo alrededor solo del cuerpo en la vista previa. Pero si usas el mismo código con el selector universal, verás un borde alrededor de cada elemento de la página. Espero que ahora entiendas la diferencia entre diseñar el cuerpo y usar el selector universal. 9. Árbol genealógico en HTML: Hablar sobre el árbol genealógico HTML. Al igual que en una familia real, los elementos HTML tienen relaciones, padres, hijos, hermanos, antepasados y descendientes. Comprender estas relaciones te ayudará a usar selectores CSS de manera más efectiva, padre e hijo El padre es el elemento contenedor. El niño es el elemento directamente dentro del padre. Ejemplo, aquí, Div es el padre y P es el hijo. Hermanos hermanos son elementos que comparten el mismo padre. Ejemplo, los tres elementos LI son hermanos porque todos están dentro del mismo padre UL. Ancestros y descendientes. Un antepasado es cualquier elemento que está más arriba en la jerarquía Esto incluye al padre, abuelo, bisabuelo, y así sucesivamente Un descendiente es cualquier elemento que se anida dentro de un antepasado, no importa cuán Ejemplo, body es un antepasado de P, y también lo son DIV y sección P es un descendiente de sección, div y cuerpo. Echemos un vistazo a este código HTML. Aquí, la etiqueta corporal es nuestro punto de partida. Es el padre de todo lo que hay dentro de él. En el archivo HTML completo, HTML sería la raíz real, pero para este fragmento, nos centraremos en body Niños de primer nivel, hijos directos del cuerpo R, sección, artículo. Estos dos elementos son hermanos porque comparten el mismo padre. Dentro de la sección, sección es un hijo de cuerpo. Dentro de la sección tenemos H dos y P. Tanto H dos como P son hijos de sección, y son hermanos entre sí. Dentro de la sección P interior. Esta P contiene algún texto, pero también incluye dos elementos, itálica, subrayado Estas etiquetas, yo y somos hijos de la P y hermanos entre sí. Dentro del artículo. El artículo es otro hijo de cuerpo. Dentro del artículo hay H tres y P. Nuevamente, H tres y P son hijos de artículo y hermanos. Dentro de la P dentro del artículo. Esta P contiene texto y elementos fuertes y span. Strong y Span son hijos de esta P y hermanos entre sí. Ahora, entendamos este código con la ayuda de una infografía Parent, un elemento que contiene directamente otros elementos. Ejemplo, cuerpo es el padre de sección y artículo. Niño. Un elemento directamente dentro de otro. Ejemplo, H dos es hijo de sección. Hermanos, elementos con el mismo padre. Ejemplo, sección y artículo son hermanos. H dos y P sección interior son hermanos. Ancestro. Un elemento por encima de otro en el árbol , padre, abuelo, etcétera. Ejemplo, el cuerpo es un antepasado de cada elemento dentro de él. Descendiente, cualquier elemento dentro otro elemento en cualquier ejemplo, U dentro de P, sección interior, dentro del cuerpo Todos son descendientes del cuerpo. 10. Selector descendente: En esta lección, vamos a explorar uno de los conceptos más fundamentales y poderosos en CSS, el selector de descendientes Entender esto te ayudará a estilar páginas web complejas fácilmente, incluso si los elementos están profundamente anidados, un selector de descendientes te permite apuntar a elementos que están anidados dentro de otros elementos a Lo usas cuando quieres darle estilo a todos los elementos de cierto tipo, solo si están dentro de un padre o contenedor específico. Por ejemplo, en este código, tenemos una H dos encabezamientos, dos H tres encabezamientos, tres párrafos y tres elementos span Supongamos que desea cambiar el color del encabezado H tres dentro una etiqueta de sección sin realizar ningún cambio en el código HTML. Si simplemente estilizas todas las etiquetas H tres, por ejemplo, configurando su color en verde, entonces los encabezados H tres se volverán verdes Pero si solo quieres apuntar al H tres que es un descendiente de la etiqueta de sección, puedes usar el selector de descendiente En este caso, solo escribe sección. Ahora, sólo la H tres dentro de la sección se volvió verde. Para la segunda situación, digamos que quieres hacer azules todos los elementos span dentro de la sección del artículo. Creo que puedes adivinar. Escribe Article span en el CSS y establece el color en azul. Ahora, un caso más. Si quieres cambiar el color de los elementos span dentro de los párrafos, recuerda que un span dentro de un párrafo es un descendiente, así que simplemente escribes P span en el CSS y le das un color, por ejemplo, rojo Así es como usas selectores descendientes para apuntar a elementos específicos dentro de un padre en particular sin cambiar el código HTML Espero que ahora lo hayas entendido. El selector de descendientes no se limita a solo dos niveles Coincide con cualquier nivel abajo del árbol. Se puede combinar con clases, ID o selectores de elementos, y el selector descendiente es una de las herramientas más esenciales en CSS para orientar elementos en diseños complejos Úsalo cuando quieras darle estilo a todos los elementos dentro de un contenedor específico, sin importar cuán profundos estén anidados 11. Selector de niños: Hola a todos. En esta lección, vamos a aprender sobre otro selector importante de CSS, el selector hijo. Este selector te ayuda a apuntar solo a los hijos directos de un elemento, brindándote precisión y control en tus diseños web. Un selector secundario selecciona elementos que son los hijos directos inmediatos de un padre especificado. A diferencia del selector de descendientes, no seleccionará nietos ni elementos anidados más profundos, solo los Sintaxis. El selector hijo utiliza un símbolo mayor que entre dos selectores. Ejemplo de sintaxis. Aquí, el padre es el contenedor, y el hijo es el hijo directo al que quieres apuntar. Por ejemplo, en este código, ahora solo tenemos una sección, y dentro de esa sección, tenemos un artículo. Dentro de estos, hay dos H tres encabezados, uno directamente dentro de la sección, y otro dentro del artículo Si queremos cambiar el color de este encabezado H tres, y usamos el selector descendiente escribiendo la Sección H tres y ajustando el color a rojo, entonces ¿qué pasará? Verás que ambos encabezamientos H tres se vuelven rojos. Eso se debe a que ambos son descendientes de la sección, pesar de que uno está dentro del artículo. En esta situación, utilizamos el selector hijo. En el código, el primero H tres es hijo directo de la sección, mientras que el segundo H tres es hijo del artículo, que lo convierte en nieto de la sección Entonces, si solo quieres apuntar al hijo directo, escribe una sección mayor que H tres en tu CSS. En consecuencia, sólo la H tres directa dentro de la sección se pondrá roja. Espero que esto te ayude a entender cómo funciona el selector infantil. Aquí hay una condición más. Digamos que quieres hacer azul el texto subyacente. En ambos párrafos, sólo esta U es hijo directo de P. Esta U es hijo de la etiqueta fuerte y el nieto de la etiqueta P. Para que puedas volver a usar el selector hijo. Ahora escribe el Artículo P mayor que y establece el color en azul. Esto girará únicamente el texto de subrayado directo dentro del párrafo azul Por qué usar selectores infantiles. Precisión. Apunte solo a los elementos a los que te refieres, evitando estilos accidentales en elementos anidados organización mantiene su CSS limpio, especialmente en diseños o componentes complejos. rendimiento puede mejorar la velocidad de renderizado ya que el navegador no tiene que verificar todos los niveles. Y recuerda, si quieres apuntar solo al primer nivel, usa el selector hijo. Si quieres apuntar a todos los niveles, usa el selector de descendientes, sigue practicando y experimentando con ambos selectores para dominar el arte de la segmentación CSS 12. Selector de hermanos adyacentes: En esta lección, vamos a explorar el selector Adyacent Sibling en CSS, una poderosa herramienta que permite darle estilo a un elemento que viene inmediatamente después otro elemento y solo ese Si quieres precisión en tus diseños, este es un selector que debes conocer. ¿Qué es un selector de hermanos adyacentes? Un selector de hermanos adyacente apunta un elemento que está directamente al lado de otro elemento, compartiendo el mismo padre Es como señalar a la persona que se sienta a tu lado, a nadie más. Sintaxis, el selector de hermanos adyacentes utiliza un signo más entre dos selectores Ejemplo de sintaxis aquí, el elemento uno es el primer elemento, y el elemento dos es el inmediatamente posterior. Por ejemplo, en este código, tenemos una sección y un artículo. Ahora, digamos que queremos cambiar el estilo de texto de sólo este primer párrafo solamente. Si usamos el selector descendiente o hijo, entonces cambiarían todos los párrafos dentro de la sección En esta situación, utilizamos el selector de hermanos adyacentes. Para ello, escribe H dos más P en CSS y haz que el texto sea negrita y azul. Ahora, verás que sólo el primer párrafo inmediatamente después del encabezado H dos se vuelve negrita y azul. Esto sucede porque el selector de hermanos adyacente apunta a un elemento que está directamente al lado de otro elemento Si quieres cambiar el párrafo que viene después de una H cuatro a verde, escribe H cuatro más P y establece el color en verde. Ahora, todos los párrafos que vienen después del encabezado H four se volverán verdes, y el selector de hermanos adyacente usa más Se dirige a un elemento inmediatamente después de otro, ambos compartiendo el mismo padre y genial para un estilo preciso siguiente en línea. 13. Selector general de hermanos: En esta lección, aprendemos sobre el selector general de hermanos en CSS Este selector es tu herramienta cuando quieres darle estilo a todos los elementos de cierto tipo que vienen después de un elemento específico, siempre y cuando compartan el mismo padre, aunque no estén justo al lado del otro. Un selector general de hermanos le permite seleccionar todos los hermanos de un elemento que viene después de él, no solo el inmediatamente siguiente Imagina que quieres darle estilo a todos los hermanos y hermanas nacidos después de cierto hermano en una familia, no solo al siguiente, sino a todos después del punto Syntax El selector general de hermanos utiliza un símbolo Tilda entre dos Ejemplo de sintaxis elemento el primer elemento. Elemento dos, todos los hermanos de este tipo vienen después del elemento uno con el mismo padre. Por ejemplo, en este código, tenemos una sección. Y una etiqueta de artículo. Ahora, supongamos que queremos cambiar el estilo de todos los párrafos hermanos posteriores después del encabezado H dos Podemos usar el selector general de hermanos para esto. Escribe H dos Tilda P en el CSS. Y establece el color de la fuente en rojo. Verás que todos los párrafos que son hermanos y vienen después de los H dos son ahora rojos. Hagamos lo mismo dentro del artículo. Aquí, queremos apuntar a todos los párrafos que vienen después del rubro H four. Seguro que ya sabes qué hacer. Escribe Hour Tilde P y dale el color rojo. Aquí está el resultado. Y el selector general de hermanos usa el símbolo Tilda. Selecciona todos los hermanos de un tipo especificado que vienen después de un elemento dado con el mismo padre. Es útil para un estilo dinámico flexible, especialmente cuando cambia tu estructura HTML. Y recuerda, si quieres darle estilo solo al siguiente hermano, usa plus, si quieres estilizar a todos los hermanos después de cierto elemento, usa Tilda 14. Selectores de atributos de CSS: Bienvenido a este tutorial CSS sobre selectores de atributos. En esta sesión, aprenderemos qué son los selectores de atributos, por qué son útiles y cómo usarlos de manera efectiva en tus proyectos web Los selectores de atributos en CSS permiten seleccionar elementos HTML en función la presencia o valor de un atributo específico En lugar de apuntar a los elementos por nombre de etiqueta, clase o ID, los selectores de atributos dirigen elementos usando sus atributos, como HRF, tipo, SRC, Alt, título y ¿Por qué usarlos? Te dan más control y flexibilidad, especialmente cuando quieres darle estilo a elementos que comparten un determinado atributo independientemente de su etiqueta o clase. Por ejemplo, en este código, tenemos cuatro enlaces. Los dos primeros son enlaces externos y los dos últimos son enlaces internos. Ahora, digamos que queremos cambiar el color de solo los enlaces externos sin cambiar el código HTML. En esta situación, podemos usar el selector de atributos. Podemos apuntar atributos dentro de la etiqueta de anclaje. Notarás que los dos primeros enlaces tienen el atributo target, mientras que los dos últimos no. En el CSS, usa corchetes y escribe target dentro de ellos y establece el color en rojo. Verás que los dos primeros enlaces con el atributo target se vuelven rojos, pero a veces necesitamos ser más específicos. Por ejemplo, si usamos title como selector y si un párrafo también tiene un atributo title, ese párrafo también se volvería rojo. Para evitar este problema, siempre sea específico escribiendo A antes de los corchetes. Ahora, el selector de atributos solo apunta a los atributos de título que están en las etiquetas de anclaje. Espero que ahora entiendas cómo funciona el selector de atributos y uses selectores de atributos para grupos pequeños a medianos de elementos o cuando quieras que tu HTML se mantenga limpio sin muchas clases Recuerde, todos los elementos con el atributo serán seleccionados independientemente del valor de los atributos. Nos sumergiremos en selectores que coincidan con elementos basados en el valor del atributo para lograr un estilo aún más preciso I 15. Selectores de atributos CSS - valor: la sección anterior, aprendimos a usar el selector de atributos para darle estilo a todos los elementos que tienen un atributo particular independientemente de su valor. Ahora, vamos a dar un paso más allá con el selector de valor de atributo. El selector de valor de atributo le permite apuntar a elementos que tienen un atributo específico con un valor exacto. no se trata solo de la presencia Ya no se trata solo de la presencia del atributo, se trata de hacer coincidir el valor del atributo con precisión. Esto es extremadamente útil cuando se quiere diseñar solo ciertos elementos de un grupo más grande. Por ejemplo, en este código, si queremos apuntar al atributo title con una palabra exacta, entonces podemos usar el selector de valor de atributo. Apuntemos al primer enlace y cambiemos su color a azul. En CSS, escribe A, luego titulo y dale el valor visita example.com Y establece el color en azul. Ahora, verás que solo el primer enlace con el título coincidente exacto se vuelve azul. A continuación, si quieres apuntar al enlace de anclaje con el título, descarga PDF para obtener ayuda. Escribe Descarga PDF para obtener ayuda aquí y establece el color en azul. Ahora bien, este enlace específico también se pondrá azul. Espero que entiendas ahora cómo funciona esto. Ahora bien, si quieres apuntar a enlaces donde un valor de atributo es una lista de palabras separadas por espacios, y quieres seleccionar elementos donde una de esas palabras coincida exactamente, puedes usar el selector de atributos con el símbolo Tilda Por ejemplo, usa Tilda aquí y escribe ayuda. Dale valor de color a verde, y esto seleccionará cualquier etiqueta de anclaje donde el atributo title contenga la palabra help como una palabra separada. En el resultado, se puede ver que estos tres últimos enlaces se vuelven verdes porque tienen la palabra ayuda en su lista de palabras en el atributo title. Ahora, supongamos que queremos apuntar a enlaces que comiencen con ciertas palabras. Para ello, utilizamos el símbolo del quilate. este selector se le llama a veces el selector de arranques con. Permite apuntar a elementos cuyo valor de atributo comienza con una cadena de texto específica, sin importar lo que venga después de ella. Por ejemplo, si queremos apuntar a enlaces cuyo título comienza con VI y cambiar su color a naranja, podemos usar tartas con selector, escribir un símbolo de signo de referencia aquí y Vi y establecer el color Ahora, sólo los enlaces cuyo título inicia con V se volverán anaranjados. Ahora apuntemos a lo contrario. Es decir, enlaces donde el valor del atributo termina con una palabra específica. Para ello, utilizamos el signo de dólar. Esto también se llama el selector endswith. Este selector aplicará tu CSS a cualquier elemento donde el atributo especificado termine con el valor que escribiste. Útil para hacer coincidir tipos de archivos, URL o cualquier cosa con un final consistente, especialmente potente para enlaces, imágenes y archivos descargables Por ejemplo, si queremos apuntar a enlaces cuyo título termine con LP y cambien su color a morado, Usa dólar inicia sesión aquí y escribe LP en el CSS y establece el color en morado. Ahora, sólo los enlaces cuyo título termine con L P se volverán morados. ¿Cuándo se debe usar termina con selector? Cuando quieras apuntar a tipos de archivos como PDF, JPG, PNG o SVG en Enlaces o imágenes. Cuando los enlaces, los nombres de archivo o los ID tienen finales consistentes, necesita estilo, ideal para recursos descargables, campos de formulario o enlaces de navegación Ahora apuntemos a una palabra específica en cualquier lugar dentro de su valor. Para ello, utilizamos el signo de asterisco. Esto también se llama el selector de contiene. Este selector coincide con elementos donde el atributo tiene tu valor en cualquier parte de su texto, no solo al principio o al final, sino también en cualquier lugar en el medio. Y esto lo hace súper flexible para orientar elementos mediante coincidencias parciales, palabras clave o cadenas únicas. Por ejemplo, apuntemos a todos los enlaces que contengan el LP de texto en cualquier lugar de su valor de atributo. Para ello, usamos el selector de asterisco, escribimos asterisco y LP en tu CSS y establecemos el color Ahora puedes ver que todos los enlaces con LP en cualquier parte de su título se convierten en Cian. Ahora, déjame mostrarte un ejemplo donde usamos selectores de atributos En este código, tenemos varios hipervínculos. Estos enlaces apuntan a dos tipos de archivos. Algunos son PDFs y otros son MP four videos. Cuando tenemos una vista previa de la página, los usuarios no pueden decir fácilmente qué enlace conduce a un archivo PDF y cuál conduce a un archivo de video. Para resolver esto, podemos mostrar un ícono de PDF o video antes de que comience el enlace. Los usuarios sabrán de un vistazo qué enlace es cuál. En un caso dinámico, estos enlaces pueden generarse automáticamente en función del tipo de archivo, por lo que no puede agregar clases CSS manualmente, pero puede manejarlo fácilmente usando selectores de atributos CSS Vamos a apuntar a las extensiones de archivo usando el selector endswith Ahora, escribe LLI y A, usa Href luego signo de dólar Y dar un valor de extensión como punto PDF. A continuación, use la propiedad background y establezca la ruta de su ícono de PDF. No use repetición y colóquelo a la izquierda. Establezca el bloque en línea de visualización en el enlace. A continuación, agregue relleno. Por ejemplo, diez píxeles en la parte superior e inferior y 40 píxeles a la izquierda y a la derecha. Ahora, haz lo mismo con los enlaces de video. We.p4 aquí, y ruta de icono aquí. Ahora puedes ver que los enlaces PDF muestran un ícono de PDF, y los enlaces de video muestran un ícono de video. Si desea eliminar el punto, utilice la propiedad list style non. Los selectores de atributos le permiten orientar elementos en función de la presencia o el valor del atributo Proporcionan formas poderosas de diseñar formas, enlaces, imágenes y más sin agregar clases o ID adicionales. Combine selectores de atributos para un control preciso. Eso es todo para los selectores de atributos en CSS. Practica estos ejemplos y podrás escribir hojas de estilo más limpias, flexibles y potentes. En la siguiente lección, exploraremos pseudo clases y cómo usarlas para efectos aún más avanzados 16. Pseudoclases: selectores del primer hijo y del último hijo: En este tutorial, aprenderemos todo lo que necesitas saber sobre dos poderosas pseudo clases de CSS, primer hijo y último hijo Estos selectores te ayudan a diseñar elementos específicos de un grupo, como el primer o último elemento de una lista, un conjunto de divs o cualquier otro elemento repetido Vamos a sumergirnos. Tanto el primer hijo como el último hijo son pseudo clases que te permiten apuntar un elemento en función de su posición dentro de su padre El primer hijo apunta al primer hijo de un padre. Último hijo apunta al último hijo de un padre. No tienes que agregar ninguna clase o ID a tu HTML. Solo usa estos selectores en tu CSS. ¿Por qué son útiles? Imagina que tienes una lista, un menú de navegación o un grupo de tarjetas, y quieres que la primera o la última se vea diferente. Por ejemplo, para resaltarlo, darle un borde especial o agregar espaciado. En lugar de agregar clases a tu HTML, simplemente puedes usar estas pseudo clases para un estilo limpio y eficiente Ahora bien, en este código, tenemos una lista de ítems, o supongamos que tienes un menú de navegación. Si quieres cambiar el estilo del primer o último enlace o ambos, puedes usar los selectores primer hijo y último Child Digamos que queremos que el primer enlace de la lista sea rojo y negrita. En tu CSS, escribe ULL Colon primero Child y establece el color en rojo y la forma de fuente en negrita. Ahora se puede ver que el primer enlace es rojo y negrita. A continuación, apuntemos al último enlace y hagámoslo azul con un tamaño de fuente más grande. Escribe ULLI último hijo y establece el color en azul. Y el tamaño de la fuente a 20 píxeles. Ahora el último enlace aparecerá azul y tendrá un mayor tamaño de fuente. ¿Cómo funcionan detrás de escena? CSS comprueba cada hijo de un padre. Si el elemento al que te has dirigido es el primer hijo de su padre, el primer hijo coincide. Si es el último hijo, último hijo coincide, importante, solo se emparejan elementos que son literalmente el primero o el último entre sus hermanos, aunque haya otro tipo de nodos como texto o comentarios. Déjame mostrarte un ejemplo más. Ahora, tenemos cuatro tarjetas. Vamos a estilizarlos usando los selectores de primer hijo y último Niño En el CSS, escriba dos puntos de la tarjeta primero hijo y establezca el radio del borde en los 20 píxeles superiores, píxeles cero derechos, los píxeles cero inferiores y los 20 píxeles izquierdos. Luego establece un color de fondo para la primera carta. A continuación, hagamos lo mismo para la última tarjeta. En el CSS, escribir tarjeta, dos puntos, último hijo. Y establece el radio del borde en cero píxeles superiores, 20 píxeles derechos, 20 píxeles inferiores y cero píxeles izquierdos. Después establece un color de fondo Puedes ver que esto actualiza la interfaz de usuario de la tarjeta, dando a las primeras y últimas tarjetas esquinas redondeadas en lados opuestos, y eso es todo lo que necesitas saber sobre primer hijo y último hijo en CSS. Estos selectores son simples pero potentes, lo que te ayuda a escribir estilos más limpios y mantenibles sin abarrotar tu HTML 17. Pseudoclases: selectores n-ésimo hijo y n-ésimo último hijo: Discutir dos poderosas pseudo clases Nth child y Nth Estos selectores le permiten orientar elementos en función de su posición dentro de un padre, proporcionando un alto nivel de flexibilidad para listas de estilos, tablas, menús y más sin requerir clases o ID adicionales Vamos a desglosar cada selector con ejemplos y consejos reales. Ncild es una pseudo clase CSS que permite seleccionar uno o más elementos en función de su posición dentro Piense en ello como una forma de apuntar automáticamente al primero, al segundo, a cada tercio o a cada elemento par de un grupo sin agregar clases manualmente a su HTML. El N en enésimo hijo puede ser un número, una palabra clave como par o impar o una fórmula matemática Funciona para todo tipo de elementos, listas, filas de tablas, divs, tarjetas, elementos de galería y más Ahora tenemos una lista de artículos. Si queremos apuntar al quinto elemento y cambiar su color a verde en CSS, escriba ULLI Nth child entre paréntesis use cinco y establezca el color en paréntesis use cinco y establezca el color Verás que el quinto artículo se vuelve verde. Puede seleccionar cualquier número cambiando el valor dentro de los corchetes como 17 o nueve. Para el segundo caso, si desea apuntar a todos los elementos impares o pares de la lista, enésimo hijo usa impar, y todos los elementos impares la lista se volverán verdes Ahora, use incluso y vea el resultado. Todos los artículos numerados pares cambiarán. Una de las características más poderosas de Nth child es la capacidad de usar fórmulas matemáticas donde A es el intervalo de tamaño de paso B es el punto de partida. N es que el contador comienza en cero. Por ejemplo, si usa tres N y tamaño de fuente para negrita, cada tercer elemento de la lista tres, seis, nueve estará en negrita. Ahora, si usas tres N más dos, comenzará en el segundo artículo y luego seleccionará cada tercer artículo después de eso. Entonces verás que los ítems dos, cinco, ocho, y así sucesivamente están en negrita. Ahora, vamos a discutir sobre Nth último hijo. Este selector le permite estilizar los elementos en función su posición desde el final de su padre en lugar del principio. Es como enésimo niño, pero empieza desde abajo, no desde arriba Vamos a apuntar al último ítem de la lista. Escribe ULL, N último hijo y usa uno y establece el color en rojo Ahora puedes ver que el último elemento se vuelve rojo. También puedes usar impar y par con Nth último hijo o para estilizar elementos impares o impares contando desde el final de la lista También puedes usar fórmulas como tres N más dos. Esto seleccionará cada tercer artículo desde el final, comenzando desde el segundo hasta el último artículo. Entonces verás que los elementos se seleccionan de la parte inferior después de dos prácticas usando estos selectores en tus listas, tablas y galerías y verás cuánto más limpio se vuelve tu CSS 18. Pseudoclases: selectores solo hijo y solo tipo: Ahora aprendemos sobre dos pseudo clases hijo único y solo de tipo Estos selectores te ayudan a darle estilo a los elementos en función del número de hermanos que tengan sin agregar clases o identificaciones adicionales Veamos cómo funcionan cuándo usar todos y algunos ejemplos del mundo real. La única pseudo clase hijo coincide con un elemento si es el único hijo de su padre Eso significa que si un elemento padre contiene solo un elemento hijo de cualquier tipo, entonces solo el elemento hijo se aplica a ese hijo. Por ejemplo, en este código, tenemos una sección y un elemento artículo tenemos etiquetas fuertes y etiquetas cursiva. Ahora apuntemos a etiquetas fuertes en CSS. Escribe un colon fuerte, hijo único, y establece el color en rojo. Como resultado, se puede ver que sólo este particular texto fuerte se vuelve rojo. Ahora, piensa en por qué sucede eso. Es porque esta etiqueta fuerte es el único hijo de su padre mientras que los demás tienen dos o más hijos. Espero que entiendas ahora cómo funciona el único selector hijo. Solo se aplica si un elemento padre contiene solo un elemento hijo. Es decir, comprueba si un elemento es el único hijo, es decir, no hay hermanos de ningún tipo. Ahora hablemos solo de tipo. Este selector te permite apuntar a un elemento si es el único de su tipo entre sus hermanos, haciendo que tu CSS sea más inteligente y tu HTML más limpio. En otras palabras, si un padre contiene solo un Ptag, incluso si hay otros elementos como DIV, span o H dos, entonces P solo de tipo coincidirá con esa única etiqueta P. Ahora en este código, tenemos dos H dos encabezados dentro la sección y uno H dos dentro del artículo En el CSS tenemos H dos puntos solo de tipo, y establecemos el color en azul. Verás que sólo la H dos en el artículo se vuelve azul. Eso es porque en los elementos de sección, hay dos H dos elementos. Pero en el artículo, sólo hay una H dos, convirtiéndola en la única de su tipo dentro de su padre. Déjame mostrarte un ejemplo más. Ahora, apuntemos a las etiquetas fuertes, escribamos fuertes solo de tipo y le demos el color verde. Verás que todas las etiquetas fuertes que son las únicas de su tipo dentro de su padre se vuelven verdes. Aquí se puede ver. Este selector funciona cuando un elemento es el único de su tipo entre sus hermanos y usa only child para darle estilo a un elemento que es el único hijo de su padre. Usar solo de tipo para darle estilo a un elemento, que es el único de su tipo entre hermanos, independientemente de otros tipos de hermanos Son ideales para estilizar casos especiales y reducir clases extra en tu HTML. Eso es todo lo que necesitas saber sobre Colon only child y Colon only of type en CSS. Practica estos selectores para mantener tu código limpio y flexible 19. Pseudoclases: selectores de primer tipo y de último tipo: Ahora aprenderemos sobre dos pseudo clases muy prácticas, primera de tipo y última de tipo Estos selectores te ayudan a estilizar el primer o último elemento de un tipo particular entre hermanos, haciendo que tu CSS sea más inteligente y tu HTML más limpio Exploremos qué son, cuándo usarlos, y veamos algunos ejemplos prácticos. El primero de tipo pseudo clase coincide con el primer elemento de su tipo entre sus hermanos Eso significa que si tienes varios elementos de la misma etiqueta como P o LI en un padre, primero de tipo coincidirá con el primero. En este código, tenemos un elemento de artículo. Y dentro del artículo, hay una H dos encabezamiento tres párrafos y una H cuatro rúbrica. Vamos a apuntar al primer párrafo y cambiar su estilo para tener texto azul y un fondo amarillo. Escribe P dos puntos, primero de tipo en CSS y establece el color azul y el color de fondo en amarillo. En consecuencia, el primer párrafo se vuelve azul con un fondo amarillo. Ahora, tal vez se esté preguntando por qué usamos primero de tipo en lugar de primer hijo. Hay una pequeña diferencia entre estos dos selectores. Si escribo primero hijo en lugar de primero de tipo, notarás que el estilo no aplica. ¿Por qué es eso? Es porque el primer selector hijo solo le da estilo un elemento si es el primer hijo de su padre. En este HTML, el primer hijo dentro del artículo es el encabezado H dos, no el párrafo, por lo que el estilo no aplica al párrafo. Si eliminamos la H dos, entonces el párrafo se convierte en el primer hijo y el estilo funcionará. Entonces, con el primer hijo, el elemento debe ser el primer hijo de su padre, independientemente de su tipo. Con primero de tipo, el estilo se aplica al primer elemento de ese tipo específico, aunque no sea el primer hijo. Ahora, vamos a discutir el último selector de tipo. El último de tipo pseudo clase coincide con el último elemento de su tipo entre hermanos Eso significa que de todos los elementos de una etiqueta dada dentro del mismo padre, selecciona la última. Vamos a apuntar al último párrafo y cambiar su color de texto a rojo en CSS, escribir P, dos puntos, último de tipo, y establecer el color en rojo. Verás que el último párrafo se vuelve rojo. Espero que ya hayas adivinado por qué usamos último de tipo en lugar de último hijo Eso es porque último hijo sólo funciona si el último elemento es de ese tipo específico. En este código, el último hijo es un H cuatro, por lo que el último selector hijo no funcionará para el párrafo, pero último de tipo apuntará al último elemento P, sin importar dónde se encuentre entre sus hermanos. Y recuerda, primer hijo y último hijo seleccionan el primer o último hijo de cualquier tipo dentro de un padre. Primero de tipo y último de tipo son más específicos. Buscan al primer o último hijo de cierto tipo de elemento. Estos selectores son herramientas poderosas para un estilo eficiente y preciso, especialmente cuando tienes contenido mezclado o quieres evitar el marcado HTML extra, pero sigue practicando 20. Pseudoclases: selectores n-º-de-tipo y n-último-de-tipo: Ahora vamos a sumergirnos profundamente en dos poderosas pseudo clases CSS enésima de tipo y N última Estos selectores te ayudan a apuntar elementos específicos basados no solo en su orden, sino en su tipo, lo que permite estilo flexible avanzado sin abarrotar tu HTML con Enésimo tipo selecciona el enésimo elemento de un tipo específico entre sus hermanos, contando desde la parte superior inicial del padre Es especialmente útil cuando tienes múltiples tipos de elementos como hermanos y quieres darle estilo a la aparición de una determinada etiqueta sin importar qué otros elementos estén presentes. En este código, tenemos múltiples párrafos y elementos span. Cambiemos el color y estilo del segundo párrafo. Primero, intentemos usar el selector secundario enésimo. Escribe P dos puntos N hijo y usa dos y establece el color en verde y el peso de la fuente en negrita Es posible que note que no hay cambios en la vista previa. Eso es porque enésimo hijo selecciona al segundo hijo de cualquier tipo, no solo párrafos, y el segundo hijo es un lapso, por lo que no va a apuntar al párrafo que quieras En situaciones como esta, donde se desea seleccionar el segundo párrafo, independientemente de otros elementos, debe utilizar el selector th de tipo. Ahora escribe th de tipo, y verás que el segundo párrafo se vuelve verde y negrita. Esto funciona porque enésima de tipo cuenta solo los elementos de su tipo específico, ignorando otros tipos de hermanos Espero que entiendas ahora cuándo y cómo usar estos selectores También puede cambiar el valor para seleccionar el cuarto o quinto párrafo o usar par o impar para darle estilo a párrafos impares o impares. Incluso puedes usar fórmulas como dos N. Así que cada segundo párrafo se vuelve verde. Si usa dos N más tres, comenzará desde el tercer párrafo y luego seleccionará cada segundo párrafo después de eso. Ahora vamos a discutir Nth último de tipo. enésima última de tipo funciona casi de la misma manera, pero cuenta desde el final del padre, no desde el inicio Cambiemos el estilo del tercer al último párrafo y pongamos su color a rojo en CSS, escribamos P, Nth último de tipo, y usemos tres y establecemos el color en rojo Verás que el tercer al último párrafo se vuelve rojo. Puedes usar cualquier número con este selector, y también puedes usar fórmulas pares o pares impares. Y recuerde, enésima de tipo selecciona la enésima ocurrencia de una etiqueta específica entre hermanos, contando desde arriba, enésima última de tipo, selecciona la enésima ocurrencia de una etiqueta entre hermanos, contando desde abajo, potente para diseños avanzados, HTML más limpio y CSS HTML más limpio y Y así es como usas th de tipo N y enésimo último de tipo N en CSS Pruébalos en tus proyectos y ve cuánto más flexibles pueden llegar a ser tus estilos. 21. Pseudoclases: selector vacío: Hablar de la pseudo clase vacía. Este selector te ayuda a apuntar a elementos que no tienen hijos, ni siquiera texto, espacios u otros elementos. Es útil para limpiar diseños, ocultar contenedores vacíos o agregar marcadores de posición solo cuando un elemento no tiene contenido La pseudo clase vacía coincide con cualquier elemento que no tenga hijos en absoluto Eso significa que no hay texto, ni elementos, ni siquiera un espacio o salto de línea. Si hay algún contenido dentro como una letra, un espacio, o incluso un comentario, el elemento no se considera vacío. Por ejemplo, tenemos cinco cajas. Para están vacíos, y los otros tres tienen algún texto. Si no queremos mostrar las cajas vacías, podemos usar el selector de dos puntos vacíos para ocultarlas. En tu CSS, escribe el cuadro de puntos con dos vacíos y usa la propiedad display colon non. Ahora, se puede ver que ambas cajas vacías están ocultas. Recuerde, si una caja contiene incluso un solo espacio, el selector de dos puntos vacíos no funcionará. Entonces, para que esto funcione, la caja no debería tener texto, ni elementos, ni siquiera un espacio o un salto de línea y algunos casos de uso comunes, ocultando elementos vacíos que de otra manera ocuparían espacio, depurando, detectar contenedores vacíos accidentales en tu diseño, mostrando mensajes o iconos de marcador de posición en elementos vacíos, estilizando campos vacíos en formularios, listas o cuadrículas, y así es como usa la pseudoclase vacía de dos puntos en CSS. Es una herramienta simple pero poderosa para mantener tus diseños ordenados y tus diseños fáciles de usar. 22. Pseudoclases: selector raíz: El selector de pseudo clases raíz es esencial para el CSS moderno, especialmente cuando se trabaja con propiedades personalizadas, también conocidas como variables CSS Averiguemos qué hace root, cómo usarlo y por qué es una práctica recomendada en tus hojas de estilo. La pseudoclase raíz coincide con el padre de nivel más alto en su documento HTML, que es el elemento HTML en sí Actúa igual que apuntar a la etiqueta HTML, pero tiene una mayor especificidad y se utiliza para definir variables CSS, propiedades personalizadas que desea usar en todo su sitio o. Por ejemplo, en este código, tenemos múltiples encabezados y párrafos Ahora vamos a darles estilo en CSS, escribir raíz de colon, y luego color principal y definir color como rojo. Ahora subclor al verde. Y el color del texto a gris. Ahora, vamos a aplicar estas variables. Para H dos, establezca el color usando el color principal Varda. Para H tres y H cuatro, use Varda subcolor para el color Para párrafos, establezca el color en var color del texto. Y para los botones, use también el subclor Varda. Ahora verás que ambos títulos H dos son rojos, el H tres, H cuatro, y el texto del botón son verdes, y los párrafos son grises Déjame decirte el beneficio de usar el selector de raíz de dos puntos y las variables CSS. Si cambias el subcolor a cian, verás que el encabezado y el texto del botón vuelven cian instantáneamente Supongamos que usa el subcolor dash dash en varios lugares como encabezados, botones, etiquetas span y etiquetas fuertes en todo tu CSS Si quieres cambiar el color a morado, solo tienes que actualizarlo en un solo lugar en el selector de raíz de colon, y cambia en todas partes donde se use esa variable. De lo contrario, tendrías que cambiar manualmente el color en cada lugar donde escribiste verde. Por ejemplo, si pones verde aquí y aquí, y luego quieres cambiarlo a Pian. Tendrías que actualizarlo dos veces, una para el encabezado y otra para el botón. El uso de variables raíz y CSS también facilita el cambio entre temas claros y oscuros. Simplemente actualiza las variables y todos tus estilos se actualizan automáticamente. Y root es equivalente a HTML en selector, pero se prefiere para las variables debido a su mayor especificidad. Definir variables en la raíz asegura que estén disponibles globalmente en cualquier lugar de su CSS. Las variables CSS se pueden sobrescribir en selectores más específicos, pero la raíz de dos puntos establece el valor predeterminado para todo el documento Todos los navegadores modernos admiten variables de raíz de colon y CSS. 23. Pseudoclases - no selector: Pseudo clase, una poderosa forma de apuntar a elementos que no coinciden con un cierto selector Pseudoclass te ayuda a escribir CSS más limpios y flexibles y excepciones de estilo sin agregar clases adicionales o marcas Entonces pseudoclass coincide con cada elemento que no coincide con el selector pones dentro de los paréntesis Le permite excluir elementos de una regla de estilo, lo que le permite aplicar estilos ampliamente mientras se saltan casos específicos Por ejemplo, en este código, tenemos cuatro elementos LI y dos botones. Queremos cambiar el color de los últimos tres artículos LI. Primero Li tiene clase activa, así podemos usar el selector de nudo junto con la clase activa, en tu CSS hacemos nudo de colon Li y usamos la clase activa para apuntar a todos los elementos LI que no tengan la clase activa. Establece el color en azul. Ahora, verás que los artículos LI sin la clase activa se vuelven azules. Déjame darte un segundo ejemplo. Tenemos dos botones y el segundo botón está deshabilitado. Queremos darle estilo solo al primer botón en tu CSS, botón derecho dos puntos, no y usar deshabilitado. Y establece el fondo en verde y el color en blanco. Ahora, el primer botón se estiliza usando el selector de dos puntos Kt, mientras que el botón deshabilitado permanece sin cambios y algunos consejos importantes Nudo no agrega especificidad. Simplemente filtra lo que se empareja. Puedes poner cualquier selector válido dentro, pero es más útil para clases, atributos o pseudoclases, totalmente compatible con todos los navegadores modernos Esa es la potencia de la pseudo clase no selectora en CSS. Es la herramienta perfecta para hacer excepciones en tus estilos, mantener tu código SECO y evitar clases HTML adicionales innecesarias. 24. Pseudoclases - es selector: Ahora aprenderemos sobre uno de los selectores CSS más potentes y modernos Eso es pseudoclase. Este selector le permite agrupar y simplificar selectores complejos, haciendo que sus hojas de estilo sean más fáciles de leer y mantener Averiguemos qué es el selector, cómo usarlo y por qué se está convirtiendo en un must know para cada desarrollador web. Y la pseudo clase te permite emparejar cualquiera de un grupo de selectores Es una manera de combinar múltiples selectores en una regla concisa en lugar de repetir estilos una y otra Por ejemplo, en este código, tenemos una tarjeta y un artículo. Primero, apuntemos a la sección del artículo. Queremos cambiar el color de todos los encabezados como H dos, H tres, H cuatro y el botón a azul Normalmente, en CSS, escribirías Artículo H dos, Artículo H tres, Artículo H cuatro, Botón Artículo, y darle color al azul. Y esto funciona bien. Pero quiero señalar algo importante. A veces la gente se confunde y escribe CSS como Artículo H dos, H tres, H cuatro. Y de esta manera, apuntas al artículo H dos y a todos los H tres, y a todos los H cuatro. Así que recuerda, si quieres apuntar a alguna sección, entonces tienes que escribir el nombre de la sección después del coma cada vez. Podrías notar que repetir el nombre de la sección puede hacer que tu CSS sea largo y repetitivo. Hay una solución. Puedes escribir tu CSS de una manera más corta usando el selector I. Ahora en escritura CSS, dos puntos del espacio del artículo se usan los corchetes, y recuerden que no debería haber espacio entre I y los corchetes. De lo contrario, no va a funcionar, y escribir H dos, H tres, H cuatro y botón. Esto significa que estás apuntando a los tres títulos H cuatro y botones dentro del artículo y estableces el color en azul Verás que todos los encabezados y el texto del botón dentro del artículo son ahora azules Déjame mostrarte un ejemplo más. En la sección de tarjetas, tenemos elementos de encabezado y pie de página. Cambiemos el estilo de ambos usando el selector I en CSS. Cardspac dos puntos es, el corchete usa encabezado y pie de página. Yo y establecí el fondo verde y el color en blanco y rellenando diez píxeles. Ahora puedes ver que el encabezado y pie de página de la tarjeta tienen sus estilos cambiados todo con un selector corto y sencillo. Y por qué el uso es selector, simplifica selectores complejos, sin necesidad de repetir reglas largas, reduce la duplicación de código, una regla en lugar de muchas, mejora la legibilidad, mejora la legibilidad, más fácil de ver lo que se está apuntando de un vistazo Ayuda con el manejo de la especificidad. La especificidad de es coincide con el selector más específico dentro, y se puede utilizar cualquier selector válido dentro es etiquetas, clases, IDs, atributos, pseudo clases, etcétera La especificidad de es igual al selector más específico dentro de la lista. Y yo selector funciona en todos los navegadores modernos desde 2021, es una forma moderna y eficiente escribir hojas de estilo más limpias, haciendo que tu código sea más potente y más fácil de mantener. 25. Pseudoclases - donde selector: Pseudoclass, uno de los selectores más recientes y útiles en CSS moderno, donde pseudoclass te ayuda a escribir código más limpio y gestionar la especificidad, especialmente en proyectos grandes o al construir La pseudoclase Ware le permite agrupar varios selectores juntos al igual que es Pero aquí está la característica especial donde PseudoCASS siempre tiene cero especificidad sin importar qué selectores pongas Por ejemplo, en este código, tenemos tres elementos de sección y un elemento artículo. Primero, cambiemos el color de todos los encabezados dentro del elemento article Derecha, artículo dos puntos, nos paréntesis y escribimos tres. Y establece el color en verde. Ahora, se puede ver que todos los encabezados H dos y H tres dentro del artículo se tornan verdes Y déjame decirte una cosa en qué se diferencia el selector Were es selector. Ambos selectores te permiten emparejar cualquiera de un grupo de selectores. Is selector aplica la especificidad del selector más específico dentro de él. Donde selector siempre tiene especificidad cero, incluso si usas IDs o clases en su interior. Esto significa donde la pseudo clase es genial para los estilos set o base porque no ganará contra reglas más específicas en otros lugares Déjame mostrarte un ejemplo más donde voy demostrar cómo usar es y nosotros seleccionadores juntos Supongamos que queremos cambiar el color del encabezado H dos en la primera y última sección, así como en los elementos del artículo. En tu CSS, escribe dos puntos es, luego corchete y corchete interior, escribe sección, dos puntos luego donde y entre paréntesis. Llama a las dos clases, principal y tercera. Ahora escribe estas dos clases. Después escribe artículo, luego H dos y establece el color en rojo. Ahora, se puede ver que los encabezamientos H dos en la primera y última sección, así como en el artículo, están todos puestos rojos Y usa Warforset o estilos base en tu CSS, no chocará con tu sistema de diseño Recuerde, debido a la especificidad cero, cualquier ID de clase o selector de atributos anulará fácilmente el soporte del navegador. Todos los navegadores modernos ahora admiten dónde. 26. Pseudoclases (tiene selector: Ahora, descubriremos una de las características más emocionantes y poderosas CSS moderno que tiene pseudo clase Este selector suele llamarse el selector padre, porque te permite diseñar elementos basados en sus hijos o descendientes, algo que los desarrolladores web han querido desde hace años. Veamos cómo funciona, por qué es tan especial y cómo puedes usarlo en tus propios proyectos. La pseudo clase HAS selecciona cualquier elemento que contenga un hijo o descendiente que coincide con el selector dentro de los paréntesis el selector dentro de los En palabras simples, te permite decir estilo a este elemento padre si tiene un determinado hijo dentro. Esto es un gran problema porque en CSS más antiguos, solo se podía diseñar a los niños en función de sus padres, no al revés. Por ejemplo, en este código, tenemos dos tarjetas y una lista. Primero, diseñemos la tarjeta que contiene una imagen. Un punto importante, si la imagen se agrega dinámicamente, no se puede estilizar manualmente con una clase o ID. En tu CSS, escribe, tarjeta tiene IMG y luego establece un color de fondo y el borde Y el color del texto a negro. De esta manera, la tarjeta con una imagen obtendrá el nuevo estilo sin necesidad de agregar nada extra en el HTML. Déjame darte un ejemplo más con elementos de lista. En esta lista, dos elementos contienen un div con una clase, y los otros dos no. Vamos a darles estilo usando el selector has. En tu CSS, escribe Li tiene DIV y establece el color de fondo y dale al borde izquierdo cuatro píxeles y color. Después rellenando 12 píxeles y el peso de la fuente a negrita. Ahora otra vez, L, yo no tiene Div y establecer el color de fondo. Y relleno 12 píxeles y establecer el color del texto. Con esto, los elementos de la lista que contienen un div tienen un estilo, y los demás tienen un estilo diferente todo hecho con selectores CSS, sin cambios adicionales en el HTML ¿Por qué es tan poderoso? Trae la selección de padres a CSS. Ahora puedes darle estilo a los elementos arriba del árbol, no solo hacia abajo. Ideal para interactividad, tematización o estilo basado en estado sin Javascript adicional Te permite escribir HTML más limpio sin clases adicionales para cada escenario, rendimiento y soporte de navegador. A partir de 2024 a 2025, tiene pseudo clase es compatible con todos los principales navegadores modernos, incluyendo Chrome, Edge, Safari y Firefox Esa es la magia de la pseudo clase H. Desbloquea posibilidades completamente nuevas para diseñar elementos padre en función de su contenido, algo con lo que los diseñadores web han soñado durante décadas 27. Pseudoelementos: selectores del antes y el después: Pseudo elementos antes y después, te permiten agregar contenido extra o decoración a tus elementos HTML sin cambiar tu marcado. Veamos cómo funcionan. Antes elemento psudo inserta contenido antes que el contenido real de un Después de que el pseudo elemento inserta contenido después del contenido de un elemento, ambos crean elementos virtuales en línea dentro del elemento elegido, perfectos para agregar iconos, símbolos, citas, fondos y más Se requiere la propiedad de contenido. Eso es lo que se inserta. Puedes agregar texto, caracteres unicode, imágenes con URL o incluso dejarlo vacío para crear formas decorativas. Por ejemplo, en este código, tenemos etiquetas de anclaje, un botón y elementos de lista. Notarás que las etiquetas de anclaje no tienen ningún icono. Si queremos agregar un icono antes o después del enlace, podemos hacerlo fácilmente usando los pseudo elementos antes y después Escribe la sección dos puntos, luego después y escribe contenido y llama al icono de fondo. Y no repetir y posicionar a la derecha. Y luego usar relleno. Ahora verás que aparece el icono después del enlace. Si desea agregar texto en lugar de un icono, coloque el texto en la propiedad content, y automáticamente aparecerá después del enlace. Et se mueve al ejemplo de botón. Si quieres agregar un icono antes y después del texto del botón, usa estos pseudo elementos, escribe botón punto y dos puntos antes Y luego el contenido usa Start y establece el color oro. Ahora, después de nuevo, escribir botón de punto y dos puntos después y luego contenido usa tick y establece el color blanco, y necesito, luego usa el relleno y hemos estilizado el botón Ahora vamos a enumerar elementos de estilo en CSS, escribir L I doble colon entonces antes. Yo contenido uso el icono de tick y le doy color verde. Con estos selectores, puedes agregar fácilmente propiedades CSS antes y después de tu contenido Y recuerde, antes y después, no trabaje en etiquetas de cierre automático como input, IMG o BR Puedes combinarlos con animaciones, transiciones o incluso contadores CSS. Su contenido generado es parte del elemento en la cúpula pero invisible para los lectores de pantalla a menos que sea texto real. Para la accesibilidad, no los uses para contenido importante o navegación, solo decoración. 28. Pseudoelementos: selectores de primera letra y primera línea: No, hablemos de dos poderosos pseudo elementos para la tipografía, primera letra y la primera línea Te permiten estilizar solo la primera letra o la primera línea de un bloque de texto perfecto para publicaciones de blog, historias y diseños elegantes. El pseudo elemento de la primera letra apunta solo a la primera letra de un elemento de nivel de bloque como un párrafo, encabezado o DIV Esto se usa a menudo para gorras, grandes primeras letras decorativas en libros y revistas. Por ejemplo, en este código, tenemos múltiples párrafos. Ahora, digamos que queremos cambiar el estilo de la primera letra del primer párrafo. Ahora en CSS. Derecha P doble colon, luego primera letra, y aumentar el tamaño de fuente 2.5 M y establecer el peso de la fuente en negrita. Color gris, flotante a la izquierda, altura de línea un margen derecho ocho píxeles, y familia de fuentes, Georgia. Esto le dará una letra grande con estilo al inicio de cada párrafo. Si quieres este efecto solo en el primer párrafo, usa el primero de selector de tipo. Y tenemos estilizada la letra L en primer párrafo. Ahora vamos a discutir sobre la primera línea. El pseudo elemento de primera línea apunta solo a la primera línea visible de texto en un elemento a nivel de bloque, cómo aparece en la pantalla, dependiendo del ancho y el ajuste Genial para hacer que la línea de apertura de un párrafo destaque, como en sitios de noticias o ensayos Por ejemplo, si queremos cambiar el estilo por solo primera línea del primer párrafo en CSS, escribir Pub dos puntos primera línea, se dirigirá a todos los párrafos. Así que vamos a usar primero de selector de tipo. Ahora establece el color en Magenta. Peso de fuente negrita, espaciado entre letras 1.5 píxeles. Transformación de texto en mayúsculas. Y tamaño de fuente 1.15. Ahora, sólo la primera línea del primer párrafo tendrá este estilo especial. Pero si arrastro la barra lateral para cambiar el tamaño del área de contenido, verás que solo la primera línea visible mantiene el estilo y la cantidad de texto no importa Ambos pseudo elementos admiten un subconjunto de propiedades CSS. Primera letra, fuente, color, flotación, margen, relleno, transformación de texto y más. Primera línea, fuente, color, espaciado entre letras, espaciado entre palabras, altura de línea , transformación de texto y algunos otros. Propiedades como fondo, ancho o alto pueden no funcionar como se esperaba. Desafío para ti. Intenta aplicar estilo tanto a la primera letra primera línea en el mismo párrafo. Usa diferentes fuentes o agrega una sutil sombra paralela a tu primera letra para una llamarada estilo revista. 29. Pseudoelemento: selector de selección: Elemento psudo electoral permite personalizar la apariencia del texto cuando un usuario lo resalta o lo selecciona, por ejemplo, haciendo clic y arrastrando Puede cambiar el color de fondo, el color del texto y algunas otras propiedades simples para el área de selección. Funciona para todos los contenidos seleccionables, encabezados, párrafos, vanos, listas, etcétera. Por ejemplo, en este código, cuando selecciono el texto, puede ver el resaltado azul predeterminado del navegador, pero podemos cambiarlo usando el pseudo elemento de selección en CSS, escribir P selección de dos puntos Y luego establecer el color de fondo en amarillo claro y el color del texto rojo. Ahora, cuando selecciono cualquier texto en el párrafo, el fondo de selección se vuelve amarillo claro y el texto se vuelve rojo. Puede aplicar esto a etiquetas específicas como ph one dot class o a todo el sitio con selección. Y recuerde, solo se admiten ciertas propiedades, principalmente color de fondo y sombra de texto, no admitido en selecciones de texto de campos de entrada, solo en contenido de texto normal. Es una excelente manera de agregar marca o destello sutil a sus sitios UX funciona en todos los navegadores modernos. 30. Pseudoelementos: selectores de enlace, visitados, paseos por el cursor y activos: Centrémonos en las cuatro pseudo clases clave para hipervínculos, no visitados, visitados, florecidos y activos Estos son esenciales para hacer que tus enlaces sean interactivos, informativos y visualmente atractivos. Analicemos lo que hace cada uno, veamos ejemplos y aprendamos las mejores prácticas para usarlos. ¿Qué son los estados de enlace? Cuando se crea un hipervínculo en HTML, ese enlace puede aparecer en diferentes estados CSS nos proporciona pseudo clases especiales para apuntar a cada uno de estos estados, lo que nos permite estilizarlos de manera diferente. Ahora para el enlace no visitado nunca se hizo clic antes. Por ejemplo, tenemos dos hipervínculos en HTML en CSS, nosotros, enlace de dos puntos Establezca el color azul y la decoración del texto en ninguno. Y apunta a todos los enlaces no visitados, aquellos en los que aún no has hecho clic Usa esto para el aspecto predeterminado de tu hipervínculo. Ahora para el enlace visitado, ya lo has hecho clic. Escribe dos puntos visitados y dale al texto color morado. Y se dirige a los enlaces visitados, aquellos en los que ya has hecho clic Bueno para dar comentarios a los usuarios sobre dónde han estado. Ahora para flotar, el puntero del mouse está sobre él. Escribe un cursor de dos puntos y dale color naranja y subrayado de decoración de texto Se dirige a un enlace cuando el mouse está sobre él o cuando los usuarios del teclado lo enfocan. Ideal para agregar comentarios interactivos como cambios de color o subrayados Para enlace activo, estás presionando, haciendo clic en él en ese momento. Escribe dos puntos activos y establece el color rojo y la decoración del texto subrayado ondulado Y apunta a un enlace en el mismo momento en que se le está haciendo clic, botón del ratón hacia abajo antes de soltarlo Se puede utilizar para un efecto prensado o un flash de color. El orden del enlace pseudoclases es muy importante en CSS. Para recordar el orden correcto, puedes usar la frase amor odio regla. Esto significa L para Enlace, para visitado, H para hover, A para activo e Y. Porque los navegadores aplican la última regla de coincidencia, y este orden asegura que cada estado aparezca como se esperaba Por ejemplo, si pones colon hover antes de dos puntos visitados, tus estilos de hover podrían anularse en los enlaces visitados y Cuando ves un enlace, nunca has hecho clic, aparecerá como se define en un enlace de dos puntos, por ejemplo, azul y no subrayado Si haces clic en el enlace y luego vuelves a la página, ahora coincide con dos puntos visitados. A lo mejor es morado. mueve el mouse sobre cualquier enlace, instantáneamente obtiene los estilos A colon hover A lo mejor se vuelve anaranjado y subrayado. De hecho, presionas y mantienes presionado el enlace, se aplica un colon activo. A lo mejor se vuelve rojo con un subrayado ondulado por sólo una fracción de segundo mientras haces clic Asegúrese de que los enlaces visitados y no visitados sean fáciles de distinguir para sus usuarios Siempre proporcione suficiente contraste de color para legibilidad. Considera usuarios de teclado. El uso del enfoque de colon junto con el desplazamiento de colon puede facilitar la navegación para todos No confíes únicamente en el color. Considera subrayados o iconos para mayor claridad. 31. Pseudoelemento: selector de marcador de posición: pseudo elemento marcador de posición le permite estilar del marcador de posición dentro de los campos de entrada y texterias El marcador de posición es el texto gris claro que ves en un campo antes de que el usuario escriba nada Por ejemplo, tenemos un formulario y queremos darle estilo usando el selector CSS. Cambiemos el estilo del cuadro de entrada y los marcadores de posición de texto Aria para campos como correo electrónico, teléfono, etcétera En tu CSS, escribe, entrada, dos puntos, luego texto marcador de posición, dos puntos, luego marcador de posición y establece el color azul claro y estilo de fuente cursiva Ahora puedes ver que los marcadores de posición en los cuadros de entrada y el área de texto se han vuelto azul claro y cursiva Y por defecto navegador, el texto de marcador de posición es gris claro Usando el marcador de posición, puede hacerlo de cualquier color, agregar cursiva, ajustar la opacidad e incluso cambiar el estilo cuando la entrada Puede usar marcador de posición para todos los tipos de entrada, texto, correo electrónico, búsqueda, etcétera, y para el área de texto Y para la mayoría de los navegadores modernos, el marcador de posición es suficiente. Para navegadores muy antiguos, posible que vea entrada de webkit, marcador de posición o similar, pero rara vez los necesita ahora No utilice el texto de marcador de posición como sustituto de las etiquetas utilizadas tanto para la accesibilidad 32. Pseudoelementos: selectores de enfoque, de enfoque visible y dentro del enfoque: Explore tres pseudo clases importantes para el diseño web moderno accesible, enfoque, enfoque visible y enfoque dentro Entender estos te ayudará a crear formularios, botones, menús y componentes interactivos fáciles de usar que no solo son hermosos sino que también son accesibles para todos, incluidos los usuarios de teclado y lector de pantalla. Por ejemplo, cuando haces clic en un campo de texto, ese campo ahora está enfocado. También se aplica cuando tabulas a través de controles de formulario o haces clic en un botón. Típico utiliza campos de entrada de estilo, botones, enlaces o componentes personalizados para dar una retroalimentación clara. Cuando hago clic en el cuadro de entrada, puedes ver el estilo de enfoque predeterminado. Cambiemos el estilo de enfoque del área de texto de entrada y seleccionemos cuadros. En tu CSS, escribe el enfoque de dos puntos de entrada. Seleccione el foco de colon, el foco de colon de Texaria y establezca el borde de dos píxeles color sólido y azul y de fondo verde claro Ahora, cuando haga clic en el cuadro de entrada, seleccione Cuadro o área de texto, verá un fondo verde claro con un borde azul. Ahora, hablemos de foco visible. Foco visible es una pseudo clase más nueva. Solo se aplica cuando el navegador decide que el foco debe ser visible. Por lo general, cuando un usuario navega con un teclado, no con un mouse Esto significa que puede evitar mostrar contornos o resaltados a los usuarios del mouse, pero guardarlos para aquellos que los necesitan, como usuarios de teclado o personas con necesidades de accesibilidad. ¿Por qué es importante esto? Los usuarios de teclado confían en indicadores de enfoque visibles para navegar. Los usuarios de mouse a menudo encuentran estos contornos innecesarios o distraen visualmente Escribir en CSS, botón dos puntos foco visible. Establezca el contorno de tres píxeles, amarillo sólido. Contorno, desfase dos píxeles. Ahora el botón obtiene un contorno amarillo y solo cuando se enfoca a través del teclado, no cuando se hace clic con el mouse Y por último, enfocarse dentro. Esta pseudo clase se aplica a un contenedor si alguno de sus elementos secundarios está enfocado Imagina que tienes un grupo de formularios con múltiples entradas. Enfocar dentro te permite resaltar todo el grupo cuando se enfoca cualquier entrada dentro de él. Esto es potente para resaltar secciones de formulario para una mejor usabilidad, menús, menús desplegables y tarjetas interactivas cada vez que un contenedor debe reaccionar al enfoque interno En CSS, a la derecha, forma el foco de dos puntos dentro. Y establecer el fondo azul claro y establecer la sombra de caja, también. Aquí, el grupo de formularios se ilumina azul si alguna entrada dentro está enfocada, y siempre proporciona estilos de enfoque claros para todos los usuarios Nunca quite los contornos a menos que los reemplace con algo igualmente visible. Use el enfoque visible para evitar molestar a los usuarios del mouse, pero mantenga la accesibilidad fuerte para la navegación del teclado. Use focus within para contenedores, formularios y widgets complejos donde comentarios de enfoque grupal mejoran la usabilidad. Pon a prueba tus estilos con navegación tanto del ratón como del teclado. Así es como usas el enfoque, el enfoque visible y el enfoque dentro para crear estados de enfoque accesibles, modernos y visualmente atractivos modernos y visualmente atractivos en tus proyectos web. Experimenta con estas pseudo clases para que tus formularios, menús y botones sean más fáciles de usar para todos 33. Pseudoelementos: selectores obligatorios y opcionales: Requerido y opcional. Los selectores permiten indicar visualmente qué campos debe llenar un usuario y cuáles puede omitir, haciendo que los formularios sean más fáciles, claros y más fáciles Requerido selecciona cualquier elemento de formulario como una entrada, select o textia que tenga el atributo requerido Esto significa que el usuario debe completar este campo antes de enviar el formulario. Opcional selecciona cualquier elemento de formulario que no tenga el atributo requerido. Estos campos no son obligatorios. Los usuarios pueden saltarlas. Por ejemplo, en este formulario, he utilizado el atributo requerido para los campos email y date. Mientras que los demás son opcionales, vamos a estilizarlos. Primero para requerido en CSS. Derecha, se requiere colon de entrada. Establecer el suave fondo rosa. Y ahora para opcional, derecha, ingrese dos colon opcional y establezca el fondo azul pálido. En resultado, los campos requeridos tienen un fondo rosado suave. Los campos opcionales tienen un fondo azul pálido. Los usuarios pueden ver instantáneamente qué campos deben llenar, y proporcionan señales visuales para qué campos son obligatorios y cuáles son opcionales Mejorar la experiencia del usuario, especialmente en formas largas o complejas, ayudar a prevenir errores y reducir la frustración del usuario, soporte de accesibilidad para lectores de pantalla y tecnología de asistencia Así es como usas dos colon requerido y dos colon opcional en CSS para hacer que los formularios sean más fáciles, claros y más accesibles. Agregue estos a su próximo proyecto y vea cuánto más fáciles de usar se vuelven sus formularios. 34. Pseudoelementos: selectores válidos e inválidos: Selectores válidos e inválidos. Te permite aplicar estilo a los campos de formulario instantáneamente a medida que el usuario escribe, dándoles retroalimentación inmediata sin ningún JavaScript. Y valido selecciona una entrada de formulario, texteria o select cuando el valor de los campos pasa su validación incorporada, como ser rellenado para campos obligatorios, haciendo coincidir un tipo o siguiendo un patrón, y no válido selecciona los mismos elementos cuando su valor falla en la validación, como estar vacío cuando necesario o no coincidir con un formato de correo electrónico Estos selectores responden a campos requeridos tipos de campos requeridos, correo electrónico, número, URL, etcétera. Atributo de patrón de patrones, mínimo , máximo, longitud mínima, longitud máxima y más. Por ejemplo, en este formulario, los campos de correo electrónico y fecha son obligatorios mientras que los demás son opcionales. En tu CSS ingresamos dos puntos válidos y establecemos el color de fondo verde claro. Ahora para inválidos. Los dos puntos de entrada no son válidos. Y establecer el color de fondo rosa claro. Como resultado, los campos opcionales aparecen de color verde claro porque son válidos por defecto. Los campos requeridos se volverán rosa claro hasta que el usuario ingrese entrada válida porque por defecto, no son válidos. Para el campo de entrada de correo electrónico, cuando ingresa una dirección de correo electrónico correcta, el fondo se vuelve verde claro. Lo mismo funciona para el campo de fecha. Si escribe un correo electrónico incorrecto, vuelve a ser rosa claro, y siempre combina los cambios de color con mensajes de error claros para la accesibilidad. También puedes animar cambios, agregar iconos o sacudir campos no válidos para obtener comentarios adicionales Siempre usa etiquetas para cada campo, y así es como usas los dos puntos CSS válidos y los dos puntos no válidos para que tus formularios sean más fáciles de usar e interactivos. Pruébalo en tu próximo proyecto. Ustedes usuarios les agradecerán la orientación. 35. Pseudoelemento: selector marcado: Marcó PseudoCASS un potente selector para diseñar casillas de verificación, botones de radio e interruptores de palanca basados en Con marcado, puedes crear casillas de verificación personalizadas, alternas animadas, menús dinámicos y más, todo con solo CSS La pseudoclase seleccionada selecciona los elementos del formulario que se comprueban o seleccionan Funciona en casillas de verificación, botones de radio, elementos de opción Te permite diseñar o mostrar ocultar contenido solo cuando se marca una casilla, se elige una radio o se selecciona una opción Por ejemplo, he usado la casilla de verificación y los tipos de entrada de radio en este formulario Ahora vamos a estilizarlos. En tu CSS, escribe. Ingrese, luego escriba selector y dé la casilla de verificación de valor. Después se revisaron dos puntos. Ahora otra vez, dar valor radio, luego dos puntos comprobados. Configura el contorno de un píxel de color verde sólido. Y dar desplazamiento de contorno de tres píxeles. Ahora, cuando hago clic en una casilla de verificación o botón de opción, puedes ver el nuevo estilo de contorno azul, usos creativos, interruptores de palanca personalizados, crear interruptores animados de encendido y apagado con menús de acordeón CSS puros, mostrar u ocultar respuestas o elementos de menú cuando se marca una radio o casilla de verificación, tabulaciones, construir interfaces con pestañas usando botones y etiquetas de opción , menús de navegación, navegación puedes ver el nuevo estilo de contorno azul, usos creativos, interruptores de palanca personalizados, crear interruptores animados de encendido y apagado con menús de acordeón CSS puros, mostrar u ocultar respuestas o elementos de menú cuando se marca una radio o casilla de verificación, tabulaciones, construir interfaces con pestañas usando botones y etiquetas de opción, menús de navegación, mostrar móvil navegación con una casilla de verificación Hamburguesa toggle Así es como usas la pseudo clase CSS Clonchecked para crear formularios e IU interactivos fáciles Intente agregar casillas de verificación personalizadas, mostrar menús de ocultar o alternar interruptores con solo CSS y marcado No requiere JavaScript. 36. Pseudoelementos: dentro y fuera del rango: Pseudo clases de rango y fuera de rango. Dos potentes selectores que permiten indicar visualmente si los campos de formulario están dentro del rango aceptado sin ningún Javascript. En rango se aplica a cualquier campo de formulario que tenga restricciones de rango como mínimo, máximo, paso, longitud máxima, longitud mínima o patrón, y cuyo valor esté dentro del rango permitido. Fuera de rango se aplica a los mismos campos, pero cuando el valor del usuario cae fuera de esos límites permitidos, estas pseudo clases te permiten aplicar estilo a los campos en tiempo real, dando retroalimentación inmediata a medida el usuario escribe cuando el valor es válido y dentro de los límites, en rango se aplica Cuando el valor no es válido o está fuera de los límites, se aplica fuera de rango. Por ejemplo, creé un cuadro de número de entrada y establecí el rango 18-60 Cuando ingreso un valor fuera de rango, no hay un signo visual claro, lo mismo para los valores de rango. Por lo tanto, los usuarios pueden confundirse si accidentalmente ingresan un valor que está fuera de rango. Por eso es importante proporcionar al menos alguna indicación para entradas fuera de rango. Ahora, diseñemos la entrada para una mejor experiencia de usuario. Escribir dos puntos de entrada en el rango. Y el conjunto, el borde dos píxeles verde sólido y fondo verde claro. Ahora para fuera rango, entrada derecha dos puntos fuera de rango. Y el conjunto, el borde de dos píxeles de color rojo sólido, y el fondo de color rosa claro. Ahora bien, cuando introduzco un valor como diez en el cuadro de entrada, que está fuera de rango, podrías notar que solo cambia el color de fondo y no el borde. Si te enfrentas a este problema, usa importante para la propiedad border en tu CSS, derecho, importante aquí. Y aquí. Ahora cuando entre diez, verás un borde rojo y un fondo rosa claro. Si entro 50, verás un borde verde y un fondo verde claro para un valor en el rango. Para una mejor interfaz de usuario, también puede eliminar el CSS dentro del rango si solo desea resaltar valores fuera del rango. De esta manera, cuando el usuario ingresa un valor fuera de rango, aparecerá el borde rojo y el fondo rosa claro. Y siempre combina estas pseudo clases con etiquetas claras y si es posible, ayuda o texto Usar con otros selectores de validación como dos puntos válidos y dos puntos no válidos para una máxima claridad Funciona mejor en los navegadores modernos. Todos los principales navegadores admiten estos selectores para campos de número, rango, fecha y texto Así es como usas dos puntos en rango y dos puntos fuera de rango en CSS para una validación instantánea fácil de usar. Pruébalos en tus formularios y observa cómo tu UX mejora. Los usuarios sabrán instantáneamente cuándo se acepta su entrada o necesita un ajuste. 37. Pseudoelementos: solo lectura y lectura-escritura: Los selectores de solo lectura y escritura permiten diferenciar visualmente entre los campos que los usuarios pueden editar y los que están bloqueados, leer solo todos sin Javascript. Solo lectura apunta a cualquier entrada, texia o elemento editable que no pueda ser cambiado por el usuario Es decir, tiene el atributo de solo lectura o está bloqueado de otra manera. Leer escritura apunta a elementos que se pueden editar, lo que significa que no son de solo lectura o deshabilitados. Estos selectores trabajan en campos de formas, etcétera, y también en elementos con caridad contenta Por ejemplo, en este formulario, la entrada de nombre de usuario, y esta textaria están establecidos para solo lectura, lo que significa que no puedes editarlos. Sólo se puede leer el contenido. La entrada de correo electrónico y otra área de texto son editables para que puedas escribir y realizar cambios Pero ahora mismo, los usuarios no pueden decir fácilmente qué campos son de solo lectura y cuáles son editables Este no es un buen diseño de interfaz de usuario, actualicemos el formulario para una mejor experiencia de usuario. En tu CSS, escribe solo dos puntos de entrada en rojo. Área de texto solo con dos puntos en rojo. Y establecer el fondo gris claro y color también algunos gris claro y cursor no permitido. Ahora para editable, ingrese dos puntos rojos a la derecha. Área de texto dos puntos rojo a la derecha. Y establecer el fondo verde muy claro. En consecuencia, el campo nombre de usuario y el área de texto de solo lectura tienen ahora un fondo gris y texto gris, dejando claro que no se pueden editar. El campo de correo electrónico Y el área de texto editable tienen un fondo verde muy claro, lo que facilita ver que son Esta retroalimentación instantánea ayuda a los usuarios a saber qué campos pueden y no pueden editar. ¿Sabías que puedes usar dos puntos de solo lectura y dos puntos leer escribir con cualquier elemento usando el atributo de tabla contenta Creé dos campos y utilicé el atributo de contenido editable Ahora vamos a estilizarlos para una mejor interfaz de usuario. He usado la clase RR para leer y escribir y RR uno para solo lectura. Si quieres aplicar los mismos estilos que creamos anteriormente, solo agrega el punto de clase usa RR uno aquí. Y RR aquí. Ahora tus campos tienen una apariencia mejorada y consistente y usan el rojo solo para darle estilo a cualquier campo o elemento que los usuarios no puedan editar. Usa escritura en Rojo Colón para aplicar estilo a aquellos que los usuarios pueden editar, trabajar y cualquier elemento con contenido editable Así es como usas Colon Read only y Colon Red escriben en CSS para crear formas y áreas de contenido claras, accesibles y fáciles de usar. Intenta agregar estos estados a tus proyectos. Tus usuarios apreciarán la claridad. 38. Pseudoelemento: selector objetivo: Target PSUdoCASs, puedes resaltar o mostrar secciones, crear pestañas, acordeones o alertas todo sin Javascript. Veamos qué es, cómo funciona y cómo puedes usarlo en proyectos reales. Target es una pseudoclase CSS que coincide con un elemento cuyo ID coincide con el hash en la URL Por ejemplo, tengo un elemento NAV con tres enlaces y tres elementos DIV. En cada DIV, he usado ID únicos, Sección uno, Sección dos y Sección tres, y todos comparten la misma sección de clase. Los enlaces en la navegación utilizan estos ID en sus URL con Ash Cuando hago clic en secciones, la navegación funciona bien, pero no hay resaltado para mostrar qué sección está activa. Esto hace que sea más difícil para los usuarios identificar la sección actual. Para solucionar esto, podemos usar la pseudoclase objetivo estilo a la sección activa en tu CSS, derecha, sección de puntos Colon Target y establecer el fondo amarillo claro Y el borde dejó cuatro píxeles de color naranja sólido. Ahora, cuando hago clic en un enlace de sección, solo se resalta la sección de destino. Esto facilita a los usuarios reconocer qué sección están viendo y siempre usan valores de ID claros y únicos para cada sección segmentable Utilízalo para resaltar, mostrar ocultamiento o navegación interactiva funciona en todos los navegadores modernos, sin necesidad de JavaScript. Así es como usas la pseudoclase de destino CSS para una navegación interactiva, dinámica y fácil de usar Experimenta con diferentes diseños como pestañas, acordeones y banners y dale vida a tu sitio con solo CSS 39. Pseudoelemento: selector lang: Lang pseudo class, una poderosa herramienta para diseñar texto basado en su lenguaje Esto es esencial para los sitios multilingües que garantizan la accesibilidad y brindan a su contenido el aspecto perfecto para cada idioma que hablan sus usuarios. La pseudo clase Lang selecciona elementos con un lenguaje específico definido usando el atributo Lang en HTML Puede orientar etiquetas con un idioma específico como inglés, hindi, francés o cualquier otro código de idioma. Por ejemplo, tenemos tres idiomas y los estilizamos usando la selección Lang. En CSS, escribe P Colon Lang, luego código de idioma, EN y establece el color azul y el estilo de fuente Itálico. Ahora para hindi, escribe P Colon Lang, luego código de idioma, HI, y establece el color naranja y el peso de la fuente en negrita. Ahora para francés, escribe P Colon Lang, FR y establece el color verde y subrayado de decoración de texto Yo ahora hemos estilizado el texto A en tres idiomas. Siempre establece el atributo Lang correcto en tu HTML para cada bloque de contenido. Utilice el código de idioma completo cuando sea necesario. EG LangNs AnGRCA. Combina Lang con otros selectores, como una columna Lang FR para diseñar solo enlaces franceses, por ejemplo Este selector también ayuda a los lectores de pantalla a pronunciar las palabras correctamente, mejorando la accesibilidad. Así es como usas Lang en CSS para sitios web multilingües hermosos, claros y accesibles. Pruébalo y ayuda a tu sitio hablar el idioma de todos con estilo. 40. Selectores de CSS: resumen rápido: Sesión, revisaremos rápidamente los selectores CSS más importantes y veremos cómo te ayudan a diseñar tus páginas web de manera más eficiente Desde apuntar a elementos básicos hasta usar selectores avanzados para escenarios específicos, obtendrá una visión general clara de cómo los selectores hacen que su CSS sea potente y flexible Vamos a sumergirnos y fortalecer su comprensión de los selectores CSS Como puede ver, tenemos un diseño completo del sitio web. Primero, déjame mostrarte el diseño completo. Ahora, vamos a mejorar la interfaz de usuario usando diferentes selectores CSS. En el CSS, he usado el selector raíz para definir las variables de color del sitio web. Aquí, he creado seis valores raíz. Primero, cambiemos el color del texto y el botón. Si cambio el valor del color de la marca en la raíz, notarás las actualizaciones de color en todas partes donde se use, incluido el texto del sitio web y los botones. Esto muestra la potencia del selector raíz. No es necesario reemplazar manualmente el color a lo largo de su CSS. A continuación, realicemos la barra de navegación. En los enlaces NAV, hay una frontera, pero no quiero la frontera en el último enlace. Así que vamos a eliminarlo usando el último selector hijo. Aquí, escribe NavLi colon, último hijo. Y establecer el borde derecho cero píxeles. Ahora, la frontera ha sido eliminada del último enlace. Agreguemos un borde inferior animado a los enlaces de navegación usando el pseudo elemento after En CSS ahora mismo LLI, doble colon después de entonces contenido Establezca la posición a la altura absoluta de tres píxeles. Entonces el fondo utiliza una marca variable. Después dejó cero píxeles. Abajo menos cuatro píxeles. Y el radio del borde dos pixeles. Ahora necesito esta línea para comenzar desde un ancho de cero para la animación. Vamos a establecer ancho cero píxeles. Y luego transición 0.3 segundos. Ahora, verás una línea de fondo animada debajo del enlace NAV. Al pasar el cursor sobre el enlace o activarlo, puede ampliar el ancho para una animación suave Pasemos a la sección de héroes en la sección de héroes. He usado una imagen, algo de texto y un botón. Quiero oscurecer la imagen de fondo para que el texto sea fácil de leer. Oscuremos la imagen de fondo y agreguemos algo de desenfoque usando el pseudo elemento before En Css derecho Héroe Colón antes. Utilice el contenido y, a continuación, establezca la posición absoluta. El fondo del recuadro cero usa RGB y un Alfa medio. Y luego establecer el código 30, 31, 38 y Alpha 0.65, y para filtro de fondo de desenfoque Y usa desenfoque dos píxeles. Ahora, tenemos un fondo oscuro perfecto y ligeramente borroso, lo que hace que el texto de la sección héroe destaque y sea fácil de leer Ahora, pasemos a la sección Acerca de una. Quiero que este párrafo de esta sección sea negrita, así como los párrafos de otras secciones similares. Vamos a apuntar al párrafo que viene justo después de un encabezado usando el selector de hermanos adyacente en su CSS escriba H dos más P y establezca el peso de la fuente en negrita Ahora, el párrafo inmediatamente siguiente a cada H dos se vuelve negrita. A continuación, cambiemos el estilo de la primera letra en estos párrafos. Ahora escribe punto sobre P doble colon, primera letra, y establece el tamaño de fuente 2.6 RM. Y peso de fuente 700 y color. Después flotar a la izquierda y la altura de la línea un punto. La primera letra de cada párrafo de la sección acerca de nosotros es estilizada y destaca. Ahora, cambiemos el color de la selección de texto en la sección sobre nosotros. En tu CSS, punteamos sobre P selección de dos puntos y establecemos el color de fondo. Y texto color blanco. Ahora, cuando seleccione el texto en el párrafo Acerca de nosotros, verá que el estilo de selección ha cambiado. Quiero que este texto en francés aparezca en cursiva. Vamos a usar el selector Lang en CSS justo sobre P Lang FR. Y cambiar el estilo de fuente a itálico. Y el texto francés en la sección sobre nosotros aparecerá en cursiva Ahora, agreguemos un color degradado a la primera y última carta. Para esta situación, podemos usar el enésimo selector hijo. En CSS, a la derecha, Cord colon Enth child use even. Luego doble colon antes y use contenido y posición absoluta. En conjunto nulo. Establece el color degradado y usa Opacidad 0.08 De esta manera, la primera y la última carta tienen un estilo de superposición de degradado. Ahora vamos a darle estilo a los botones. He usado el atributo comprobado en el primer botón. En CSS, los filtros de galería de punto derecho ingresan check plus label, coma, filtros de galería de puntos, label hover y establecer el color de fondo Y texto color blanco. Ahora, los botones están estilizados. La etiqueta junto a una entrada comprobada, así como cualquier etiqueta sobre la que se coloque el cursor, tendrán el nuevo fondo y el color del texto blanco En la sección de noticias y actualización, quiero que el texto del primer párrafo sea itálico en cada sección. En CSS, punto derecho noticias Artículo P Colón Primero de Tipo. Y establece el estilo de fuente en itálica. Y el primer párrafo de cada sección pasa a ser itálico. Ahora necesito agregar un estilo de borde superior a las dos últimas secciones. Para ello, podemos usar el selector Adyacent Sibling en el artículo de noticias Css wt dot más Article y establecer el borde top four pixel solid Y establece el color. Y verás un borde superior en las dos últimas secciones. Ahora, vamos a darle estilo a la mesa. Quiero agregar striping y un efecto hover a las filas de la tabla Así que usemos el enésimo selector secundario en CSS, derecho, T cuerpo TR enésimo valor hijo par y establecer el color de fondo y T cuerpo TR hover y establecer el Ahora la mesa tiene filas a rayas y un estilo Ha. Ahora vamos a darle estilo a la forma. Primero, cambiemos el estilo de enfoque de los campos de entrada y área de texto, así como el color de fuente del marcador En CSS, derecha, enfoque de dos puntos de entrada, enfoque dos puntos de área de texto y establecer el color del borde. Y delinear dos píxeles sólidos y usar color. Ahora cuando haga clic en el cuadro de entrada o área de texto, verá el nuevo estilo de enfoque aplicado. A continuación, estiliza el texto del marcador de posición en CSS, entrada derecha, marcador de posición de dos puntos dobles Área de texto doble marcador de posición de dos puntos y establecer el color azul claro Ahora, el texto del marcador de posición aparece en azul claro. Por último, vamos a cambiar el color del rojo solo los cuadros de entrada en CSS ingresamos dos puntos rojos solamente. Y establecer el color gris y fondo gris claro. Ahora ya hemos completado el estilo del formulario. Con estos cambios, hemos mejorado el diseño web general usando selectores CSS Ahora has visto cómo diferentes selectores pueden ayudarte a apuntar al estilo y mejorar cada parte de tu sitio web, haciendo que tu CSS sea más potente, organizado y eficiente Practique el uso de estos selectores en sus proyectos para crear diseños web más dinámicos y fáciles Sigue experimentando y explorando y continuarás mejorando tus habilidades de CSS 41. Conclusión: Enhorabuena. Acabas de terminar el tutorial sobre selectores CSS Ahora, ya sabes cómo seleccionar elementos por etiqueta, clase, atributos de ID e incluso usar selectores más avanzados para diseñar tus páginas de manera poderosa Recuerda, los selectores son como el mapa que guía tu CSS a las partes correctas de tu HTML Con una sólida comprensión de los selectores, puede crear diseños limpios, flexibles y hermosos. Cuanto más practiques, más natural se sentirá apuntar exactamente a lo que quieras, sin importar cuán complejo sea tu diseño. Sigue experimentando, prueba nuevas combinaciones y ve qué efectos creativos puedes lograr Gracias por acompañarme en este viaje a los selectores Master CSS Feliz codificación y nos vemos en el siguiente tutorial.