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 cuyo atributo href comience con "https". |
| [attribute$=value] | a[href$=".pdf"] | Selecciona todos los elementos cuyo atributo href termine con ".pdf". |
| [attribute*=value] | a[href*="w3schools"] | Selecciona todos los elementos cuyo atributo href contenga la subcadena "w3schools". |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias