El selector :disabled se utiliza para seleccionar el elemento deshabilitado. Esta propiedad se usa principalmente en los elementos de formulario. Sintaxis: :disabled { // CSS property } También puede establecer un color de fondo para todos los elementos de entrada deshabilitados de tipo = «texto»: input[type=text]:disabled { background: #dddddd; } Ejemplo 1: <!DOCTYPE html> <html> … Continue reading «CSS | :selector deshabilitado»
El selector :fuera de rango se usa para seleccionar los elementos que se encuentran fuera del rango dado. Este selector solo funciona para elementos de entrada con atributo máximo y mínimo. Aplicación de ejemplo: las calificaciones de un estudiante deben ser de 0 a 100. Si un instructor intenta ingresar fuera del rango, podemos resaltar … Continue reading «CSS | :selector fuera de rango»
La pseudoclase CSS :placeholder-shown selecciona el elemento de entrada o el elemento de área de texto que tiene texto de marcador de posición. La principal diferencia entre :placeholder-shown y ::placeholder es que :placeholder-shown sirve para seleccionar la entrada en sí cuando se muestra el texto del marcador de posición, mientras que ::placeholder trata de dar … Continue reading «CSS: Selector mostrado como marcador de posición»
El selector de pseudoclase CSS :nth-child() se utiliza para hacer coincidir los elementos en función de su posición en un grupo de hermanos. Coincide con cada elemento que es el enésimo hijo, independientemente del tipo, de su padre. Sintaxis: :nth-child(number) { // CSS Property } Donde número es el único argumento que representa el patrón … Continue reading «Selector CSS :nth-child()»
La barra de navegación es el componente principal de cualquier sitio web a través del cual el usuario puede navegar a través de todos los componentes y secciones de un sitio. Por eso es muy importante tener una barra o menú de navegación bien diseñado. Así que hoy veremos una barra de navegación en la … Continue reading «¿Cómo crear una barra de navegación con desenfoque animado usando CSS?»
En este artículo, vamos a crear un efecto de plegado de imagen debajo de la imagen principal. Este es un proyecto simple, podemos lograr nuestro objetivo solo usando HTML y CSS. Enfoque : Cree el div principal en el que estamos creando 4 etiquetas de lista. Uso de la propiedad de selector nth-child() para dar … Continue reading «¿Cómo crear un efecto de plegado de imagen usando HTML y CSS?»
Los selectores de CSS se utilizan para seleccionar los elementos HTML en función de su nombre de elemento, id, clase, atributo y muchos más. La referencia completa de los selectores de CSS se enumeran a continuación: CSS | Selector [atributo*=valor] CSS | Selector [atributo=valor] CSS | Selector [atributo$=valor] CSS | Selector [atributo|=valor] CSS | Selector … Continue reading «Referencia completa de selectores CSS»
El Selector :last-child se utiliza para apuntar al último elemento secundario de su padre para el estilo. Este selector es el mismo que “:nth-last-child”. Sintaxis: :last-child { //property } Ejemplo: <!DOCTYPE html> <html> <head> <style> p:last-child { background: limegreen; color: white; font-style: italic; font-size: 1.875em; } </style> </head> <body> <p>I am first … Continue reading «CSS | :selector de último hijo»
El selector elemento1~elemento2 en CSS se usa para hacer coincidir las ocurrencias de elemento2 seguido de elemento1. No es importante el elemento1 seguido inmediatamente por el elemento2. Esta propiedad funciona si ambos elementos tienen un elemento principal común. Sintaxis: element1 ~ element2 { // CSS Property } Ejemplo 1: En este ejemplo, ambos elementos tienen … Continue reading «CSS | elemento1~elemento2 Selector»
:focus Selector: generalmente se aplica a elementos de formulario o elementos que se pueden enfocar usando el teclado o el mouse como cuadro de entrada, área de texto. Un elemento está en estado de enfoque mientras usamos la tecla «tabulador» del teclado para ese elemento en particular. El estado de enfoque será el mismo hasta … Continue reading «Diferencia entre :focus y :selector activo»