Acordeon de los indices
Style HTML Elements With Specific Attributes
CSS [attribute] Selector
El selector CSS [attribute] se utiliza para seleccionar
elementos que tienen un atributo espec铆fico, sin importar su valor. A
continuaci贸n se presentan algunos ejemplos pr谩cticos de c贸mo usar este
selector.
Ejemplo 1: Seleccionar enlaces con el atributo 'target'
En este ejemplo, se seleccionan los enlaces que tienen el atributo
target y se les aplica un fondo amarillo.
Este es el c贸digo CSS para seleccionar los enlaces con el atributo
target:
/* CSS */
a[target] {
background-color: yellow;
}
HTML:
w3schools.com
disney.com
wikipedia.org
En este caso, los enlaces con el atributo
target tendr谩n un fondo amarillo, ya que el selector
CSS los selecciona a todos.
Ejemplo 2: Seleccionar elementos con el atributo 'href'
Este ejemplo aplica un color azul a todos los enlaces que contienen el
atributo href.
Este es el c贸digo CSS para seleccionar los enlaces con el atributo
href:
/* CSS */
a[href] {
color: blue;
}
HTML:
Enlace a ejemplo.com
Enlace a otro ejemplo
Los enlaces con el atributo href tendr谩n un texto azul.
CSS [attribute="value"] Selector
El selector CSS [attribute="value"] se utiliza para
seleccionar elementos que tienen un atributo espec铆fico con un valor
determinado. A continuaci贸n se muestra un ejemplo pr谩ctico de c贸mo
usar este selector.
Ejemplo 1: Seleccionar enlaces con el atributo 'target' con valor '_blank'
En este ejemplo, se seleccionan los enlaces que tienen el atributo
target="_blank" y se les aplica un fondo amarillo.
Este es el c贸digo CSS para seleccionar los enlaces con el atributo
target="_blank":
/* CSS */
a[target="_blank"] {
background-color: yellow;
}
HTML:
w3schools.com
example.com
wikipedia.org
En este caso, los enlaces con el atributo
target="_blank" tendr谩n un fondo amarillo, ya que el
selector CSS los selecciona espec铆ficamente por su valor.
CSS [attribute~="value"] Selector
El selector CSS [attribute~="value"] se utiliza para
seleccionar elementos cuyo atributo contiene una lista de valores, y
uno de esos valores coincide con el valor especificado. A continuaci贸n
se presenta un ejemplo pr谩ctico de c贸mo usar este selector.
Ejemplo 1: Seleccionar elementos con el atributo 'class' que contiene el valor 'primary'
En este ejemplo, se seleccionan los elementos que tienen el atributo
class y que contienen el valor primary en su
lista de clases.
Este es el c贸digo CSS para seleccionar los elementos con el atributo
class que contiene la palabra primary:
/* CSS */
div[class~="primary"] {
background-color: yellow;
}
HTML:
Card with primary class
Card with secondary class
Featured primary card
En este caso, los elementos con la clase
primary tendr谩n un fondo amarillo, ya que el selector
CSS los selecciona por el valor de su clase.
CSS [attribute|="value"] Selector
El selector CSS [attribute|="value"] se utiliza para
seleccionar elementos cuyo atributo contiene un valor espec铆fico o un
valor que es una lista separada por guiones, donde el primer valor
coincide con el valor especificado. Este selector se usa com煤nmente
para seleccionar elementos con atributos como el idioma en un atributo
lang. A continuaci贸n se presenta un ejemplo pr谩ctico.
Ejemplo 1: Seleccionar elementos con el atributo 'lang' que comienza con 'en-'
En este ejemplo, se seleccionan los elementos que tienen el atributo
lang que comienza con el valor en- (como
en-US, en-GB, etc.) y se les aplica un fondo
amarillo.
Este es el c贸digo CSS para seleccionar los elementos con el atributo
lang que comienza con el valor en-:
/* CSS */
html[lang|="en"] {
background-color: yellow;
}
HTML:
Contenido en ingl茅s (Estados Unidos)
Contenido en ingl茅s (Reino Unido)
Contenido en espa帽ol (Espa帽a)
En este caso, los elementos con el atributo lang que
comienza con en tendr谩n un fondo amarillo, ya que el
selector CSS los selecciona por el valor de este atributo.
CSS [attribute^="value"] Selector
El selector CSS [attribute^="value"] se utiliza para
seleccionar elementos cuyo atributo empieza con el valor especificado.
A continuaci贸n se presenta un ejemplo pr谩ctico de c贸mo usar este
selector.
Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' empieza con 'https'
En este ejemplo, se seleccionan los enlaces cuyo atributo
href empieza con el valor https, es decir,
enlaces seguros.
Este es el c贸digo CSS para seleccionar los elementos cuyo atributo
href empieza con https:
/* CSS */
a[href^="https"] {
color: green;
}
HTML:
Enlace seguro 1
Enlace seguro 2
Enlace no seguro
En este caso, los enlaces cuyo atributo href empieza
con https tendr谩n un texto verde, ya que el selector
CSS los selecciona espec铆ficamente.
CSS [attribute$="value"] Selector
El selector CSS [attribute$="value"] se utiliza para
seleccionar elementos cuyo atributo termina con el valor especificado.
Este selector es 煤til cuando deseas seleccionar elementos con
atributos cuyo valor final coincide con un valor espec铆fico. A
continuaci贸n se presenta un ejemplo pr谩ctico de c贸mo usar este
selector.
Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' termina con '.com'
En este ejemplo, se seleccionan los enlaces cuyo atributo
href termina con el valor .com, es decir,
enlaces que conducen a dominios .com.
Este es el c贸digo CSS para seleccionar los elementos cuyo atributo
href termina con .com:
/* CSS */
a[href$=".com"] {
color: blue;
}
HTML:
Enlace a example.com
Enlace a test.com
Enlace a noncom.org
En este caso, los enlaces cuyo atributo href termina
con .com tendr谩n un texto azul, ya que el selector CSS
los selecciona espec铆ficamente por ese valor al final del atributo.
CSS [attribute*="value"] Selector
El selector CSS [attribute*="value"] se utiliza para
seleccionar elementos cuyo atributo contiene el valor especificado en
cualquier parte del atributo. Este selector es 煤til cuando deseas
seleccionar elementos con atributos cuyo valor contiene una subcadena
espec铆fica. A continuaci贸n se presenta un ejemplo pr谩ctico de c贸mo
usar este selector.
Ejemplo 1: Seleccionar enlaces cuyo atributo 'href' contiene 'example'
En este ejemplo, se seleccionan los enlaces cuyo atributo
href contiene el valor example en cualquier
parte de la cadena.
Este es el c贸digo CSS para seleccionar los elementos cuyo atributo
href contiene example:
/* CSS */
a[href*="example"] {
color: purple;
}
HTML:
Enlace a example.com
Enlace a testexample.com
Enlace a nonexample.org
En este caso, los enlaces cuyo atributo href contiene
la palabra example tendr谩n un texto morado, ya que el
selector CSS los selecciona por esa subcadena presente en el
atributo.
Styling Forms
El dise帽o de formularios en CSS es crucial para la usabilidad y accesibilidad de un sitio web. A continuaci贸n, veremos c贸mo se pueden estilizar diversos elementos de formularios para hacerlos m谩s atractivos y funcionales.
Ejemplo 1: Estilizar un formulario b谩sico
En este ejemplo, se estiliza un formulario con campos de entrada, un 谩rea de texto y un bot贸n de env铆o.
Este es el c贸digo CSS para estilizar un formulario:
/* CSS para estilizar el formulario */
form {
background-color: #f4f4f4;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 10px 15px;
background-color: #39a039;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #338c33;
}
HTML:
En este caso, el formulario se estiliza con un fondo gris claro, bordes redondeados y un bot贸n verde que cambia de color al pasar el rat贸n por encima.
Todos los selectores de atributos CSS
En este tema, revisaremos todos los selectores de atributos CSS, que permiten seleccionar elementos basados en los atributos y sus valores. Estos son los selectores m谩s comunes:
| Selector | Ejemplo | Descripci贸n del ejemplo |
|---|---|---|
| [attribute] | [target] | Selecciona todos los elementos con un atributo target. |
| [attribute=value] | [target="_blank"] | Selecciona todos los elementos con target="_blank". |
| [attribute~=value] | [title~="flower"] | Selecciona todos los elementos con un atributo title que contenga una lista de palabras separadas por espacios, una de las cuales es "flower". |
| [attribute|=value] | [lang|="en"] | Selecciona todos los elementos con un atributo lang cuyo valor comience con "en". |
| [attribute^=value] | a[href^="https"] | Selecciona todos los elementos <a> cuyo atributo href comience con "https". |
| [attribute$=value] | a[href$=".pdf"] | Selecciona todos los elementos<a> cuyo atributo href termine con ".pdf". |
| [attribute*=value] | a[href*="w3schools"] | Selecciona todos los elementos <a> cuyo atributo href contenga la subcadena "w3schools". |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias