Teoría
Teoría

Coincidencias al inicio: [foo^="bar"]

En la primera parte sobre selectores vimos cómo seleccionar elementos por sus atributos: input[type="text"] selecciona todos los elementos input cuyo atributo type tiene el valor text.

Este mecanismo ofrece más posibilidades: también podemos buscar una subcadena dentro del valor de un atributo.

El selector [foo^="bar"] selecciona los elementos cuyo atributo foo comienza con la subcadena bar.

Imagina que tienes tres clases para columnas de distinto ancho: column-1, column-2 y column-3.

Comparten varias propiedades y solo cambia el ancho. Para evitar repetir código CSS, puedes reunir las propiedades comunes en una regla con el selector [class^="column-"] y dejar el ancho en las demás reglas:

[class^="column-"] {
  /* propiedades comunes: márgenes, bordes, fondo, etc. */
}
.column-1 { width: 100px; }
.column-2 { width: 200px; }
.column-3 { width: 300px; }

Así, el primer selector seleccionará estos tres elementos, cuyo atributo class comienza con column-:

<div class="column-1"></div>
<div class="column-2"></div>
<div class="column-3"></div>

Ten en cuenta que, en estos ejemplos, la búsqueda distingue entre mayúsculas y minúsculas.

Los selectores de esta parte pertenecen a la especificación CSS3 y funcionan en los navegadores modernos más utilizados.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Coincidencias al inicio: [foo^="bar"]</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Formulario de datos personales</header> <main> <form action="https://echo.htmlacademy.ru/courses" method="post"> <fieldset> <legend>Solicitud de visa para la cocina</legend> <div class="half-width"> <label>Nombre del gato</label> <input type="text" name="cat-name" value="Cupcakecito"> </div> <div class="half-width"> <label>Pasaporte felino</label> <input type="text" name="cat-passport" value="CUPCAKE-66893"> </div> <div class="half-width"> <label>Fecha de nacimiento</label> <input type="datetime" name="cat-birthday" readonly value="18-07-2012"> </div> <div class="half-width"> <label>Visitas</label> <select name="type"> <option value="Cada hora">Cada hora</option> <option value="Cada 3 horas">Cada 3 horas</option> <option value="2 veces al día" selected>2 veces al día</option> <option value="1 vez al día">1 vez al día</option> </select> </div> <div class="half-width"> <label>Fecha de solicitud</label> <input type="datetime" name="date" value="02-06-2014"> </div> <div class="half-width"> <label>Firma</label> <input type="text" name="cat-sign" value=""> </div> </fieldset> <div class="buttons"> <input type="submit" value="Enviar"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>

CSS

ObjetivosRealizado

Para todos los elementos input cuyo atributo name comienza con cat:

Establece el color del borde en #000000 y el del texto en #3498db.
Añade la imagen de fondo cat-paw.png, sin repetición y en la posición 100% 50%.