Uso de pseudoclases :even y :odd con elementos de lista en CSS

El selector:nth-child() en CSS se usa para hacer coincidir los elementos en función de su posición en un grupo de hermanos. Coincide con cada elemento que es el n-ésimo hijo. La pseudoclase: par y: impar se utiliza con la lista de elementos, como párrafos, elementos de artículos, que es básicamente un contenido de lista.  impar: … Continue reading «Uso de pseudoclases :even y :odd con elementos de lista en CSS»

CSS | Selector :nth-last-child()

El selector nth-last-child() en CSS se usa para hacer coincidir elementos en función de su posición entre el grupo de hermanos, contando desde el final. Sintaxis: :nth-last-child(number) { //CSS Property } Donde número es el argumento que representa el patrón para elementos coincidentes contando desde el final. Puede ser impar, par o en notación funcional. … Continue reading «CSS | Selector :nth-last-child()»

CSS | :selector de enlaces

El :enlace se usa para apuntar al enlace no visitado para diseñar, no a los enlaces que ya han sido visitados. Para estilizar en visitado use “ :visited ”, para estilizar al hacer clic use “ :active ” y para estilizar mueva el mouse en el enlace use “:hover”. Sintaxis:   :link { //property } Ejemplo:  … Continue reading «CSS | :selector de enlaces»

CSS | :selector por defecto

El selector predeterminado se utiliza para establecer un elemento predeterminado en un grupo del mismo tipo de elemento en un formulario. Este selector se utiliza en botón, opción, botón de opción y casilla de verificación. Sintaxis: :default { //property } Ejemplo: <!DOCTYPE html> <html>    <head>     <style>         input[type=»checkbox»]:default {             box-shadow: 0 0 1px 1px gray; … Continue reading «CSS | :selector por defecto»

CSS | ::después del selector

::after selector se usa para agregar el mismo contenido varias veces después del contenido de otros elementos. Este selector es el mismo que ::antes del selector. Sintaxis: ::after{ content: } A continuación, el código HTML/CSS muestra la funcionalidad de ::después del selector: <!DOCTYPE html> <html>    <head>     <style>         p::after {             content: » – Remember this»; … Continue reading «CSS | ::después del selector»

Explicar el concepto de pseudo-elementos en CSS

Los pseudoelementos CSS se utilizan para diseñar partes específicas de un elemento y se utilizan para agregar efectos especiales a algunos selectores. Para hacer esto, no necesitamos ningún script como javascript para agregar los efectos. Sintaxis: selector::pseudo-element { property: value; } Nota: Los dos puntos dobles reemplazaron la notación de dos puntos para los pseudoelementos … Continue reading «Explicar el concepto de pseudo-elementos en CSS»

¿Cómo seleccionar campos de entrada de texto usando el selector CSS?

El selector de atributos CSS se utiliza para apuntar a campos de texto de entrada. Los campos de texto de entrada de tipo ‘texto’ se pueden orientar utilizando input[type=text] . Nota: Se especifica que los valores de atributos predeterminados no siempre se pueden seleccionar con selectores de atributos, uno podría tratar de cubrir otros casos … Continue reading «¿Cómo seleccionar campos de entrada de texto usando el selector CSS?»

Crear una barra de progreso circular usando HTML y CSS

Una barra de progreso se utiliza para mostrar el progreso de un proceso en una computadora. Una barra de progreso muestra cuánto del proceso se completó y cuánto queda. Entonces, hoy diseñaremos una barra de progreso circular usando HTML y CSS. Al usar HTML, diseñaremos los diferentes componentes para esa barra de progreso y luego, … Continue reading «Crear una barra de progreso circular usando HTML y CSS»

Sintaxis y selectores CSS

Una regla de sintaxis CSS consta de un selector, una propiedad y su valor. El selector apunta al elemento HTML donde se aplicará el estilo CSS. La propiedad CSS está separada por punto y coma. Es una combinación del nombre del selector seguido de la propiedad: par de valores que se define para el selector … Continue reading «Sintaxis y selectores CSS»

CSS | :selector de primer tipo

El selector :first-of-type se utiliza para apuntar al primer hijo de cada elemento de su padre. si queremos diseñar el primer hijo de un elemento sin dar una clase, podemos usarlo. Sintaxis: :first-of-type { //property } Ejemplo: <!DOCTYPE html> <html>    <head>     <style>         p:first-of-type {             background: limegreen;             font-size: 4.0em;             font-style: italic;         }     </style> </head>    … Continue reading «CSS | :selector de primer tipo»