Rimorsoft Online
Blog Foro

Selectores de atributos en CSS


En CSS para principiantes se dio una introducción interesante para entender correctamente este tema, acá tocaremos el tema se selectores de atributos para ampliar nuestro alcance en CSS. Estos nos permiten aplicar diseño a aquellos elementos HTML donde exista un atributo específico.

Estos se escriben entre corchetes de la siguiente manera: [attribute].

Podemos tratar estos elementos como una función, esto quiere decir que recibe atributo y valor [attribute=value]. Por ejemplo si nuestra intención es afectar a aquellos enlaces con una dirección específica.

a[href="https://rimorsoft.com"] {
    color: #00aced;
}

Ten en cuenta que trabajar con el valor y las comillas es completamente opcional, solo usaremos las comillas cuando trabajemos con valores que requieran espacios. Veamos algunos ejemplos:

Solo etiqueta:

a {
    text-decoration: none;
}

Etiqueta y su atributo:

a[title] {
    font-weight: bold;			
}

Etiqueta, atributo y un valor con comillas.

a[href="https://rimorsoft.com"] {
    font-style: italic;
}

Etiqueta, atributo y un valos sin comillas.

input[type=email] {
    text-decoration: underline;
}

Para probar estos bloques CSS podemos tener en HTML lo siguiente:

<!DOCTYPE html>
<html lang="en">
    <head>
	      <style>
            /* Estilo */
	      </style>
    </head>
    <body>
	     <a href="https://rimorsoft.com">Rimorsoft Online</a>
	      <a href="#" title="Clic aquí">Enlace con el atributo title</a>
  	    <input type="email" placeholder="Email">
    </body>
</html>

Coincidencia de valores

En los ejemplos anteriores debíamos hacer que el valor sea exacto, pero puede darse el siguiente caso:

<div class="notification error">
    <!-- Contenido -->
</div>
<div class="notification success">
    <!-- Contenido -->
</div>
<div class="notification warning default">
    <!-- Contenido -->
</div>

En este caso quisiera trabajar con la coincidencia y afectar a los elementos que contengan error o success.

.notification {
    padding: 15px;
}
div[class~=error] {
    background-color: red;
}
div[class~=success] {
    background-color: green;
}
div[class~=warning] {
    background-color: blue;
}

Usamos el signo ~, es un tipo de virgulilla, onda o tilde de la letra eñe. Con ella indicamos que queremos trabajar con las coincidencias y no con un valor exacto, específicamente estoy diciendo "por ejemplo un div que contenga la clase success".

Otro ejemplo agregando una pseudoclase, atributo y coincidencia de valor.

[class~=warning]:hover {
    background-color: navy;
}

Puedes ver que he ignorado el nombre de la etiqueta. Inicialmente el elemento con la clase warning será azul y luego al pasar el mouse por encima cambiará de color.

Sensibilidad

Con esto queremos decir, distinguir entre mayusculas y minúsculas. Puedes tener los siguientes casos:

  1. color: YELLOW;
  2. A { }
  3. COLOR: Black
  4. background-COLOR: red;
  5. ...

Y cualquier caso el sistema va a funcionar, aunque la recomendación es siempre trabajar en minúscula es importante conocer estos casos. Por otro lado, debemos tener en cuenta que esto no aplica cuando hablamos de valores de los atributos.

<div id="MiApp">
    <p>Contenido</p>
</div>

El valor es MiApp y este debe escribirse con exactitud.

[id=MiApp] {
    background-color: gray;
}

La pregunta es ¿Y si queremos trabajar con #miapp y no #MiApp? Si se puede pero debemos usar la letra i para indicar precisamente que necesitamos insensibilidad (case-insensitive activado). Veamos el ejemplo:

[id=miapp i] {
    background-color: gray;
}

Con la letra i básicamente activamos el case-insensitive y el valor del atributo se puede colocar completamente en minúscula o con otras variaciones. En otras palabras, la coincidencia de atributos no distingue entre mayusculas y minúsculas pero hemos aprendido que podemos alterar este comportamiento con el signo o letra i. Esto quiere decir que se aplicará el estilo si el valor es miapp, miApp, MiApp, etc.

Toma en cuenta que el comportamiento por defecto es distinguir entre mayusculas y minúsculas, sin embargo, podemos colocar el signo o letra s para indicar claramente que eso es exactamente lo que esperamos.

[id=MiApp s] {
    background-color: gray;
}

Con la s queremos decir case-sensitive.

Este ejemplo solo me funcionó en Firefox. En https://caniuse.com/ pude verificar que el signo s no es soportado por muchos navegadores. Igual ya conocemos que no es obligatorio trabajar con él porque es el comportamiento por defecto, es lo esperado.

Valores con guiones

Vemos mucho esta técnica en valores que incluyan un guión como por ejemplo en la localización de los idiomas.

  1. en-US: Inglés de los Estados Unidos.
  2. es-MX: Español de México.
  3. pt-BR: Portugués de Brasil.
<p lang="es-MX">Hola, ¿cómo estás?</p>
<p lang="en-US">Hi! How are you?</p>
<p lang="pt-BR">Oi, como vai?</p>

Aquí lo importante es saber qué valor está antes del guión para tomarlo mediante el signo | (barra vertical) antes del igual.

[lang|='es'] {
    font-weight: bold;
}
[lang|='en'] {
    font-style: italic;
}
[lang|='pt'] {
    text-decoration: underline;
}

En este ejercicio atento con lo escrito en la etiqueta html, por ejemplo si está así <html lang="en"> todos tus párrafos estarán en cursiva. Borra ese atributo para que aprecies correctamente el ejercicio. Con esto entendemos al mismo tiempo que no hace falta el guión, es decir, el sistema detecta él atributo en aún sin guión.

<div class="php-tutorial">
    <h3>Listado</h3>
</div>
<div class="php-video">
    <h3>Listado</h3>
</div>
<div class="php">
    <h3>Archivados</h3>
</div>

En este ejemplo vemos un guión, eso quiere decir que podemos aplicar la técnica aprendida y seguimos por supuesto aplicando estilos de acuerdo a las coincidencias de los valores.

[class|='php'] h3 {
    font-style: italic;
}

Coincidencias mediante ^, $ y *

En otras palabras:

  1. [attribute^=value]: Para trabajar con coincidencias al comienzo.
  2. [attribute$=value]: Para trabajar con coincidencias al final.
  3. [attribute*=value]: Para trabajar con alguna coincidencia en el valor sin importar su posición.
<a href="https://rimorsoft.com">Rimorsoft Online</a>
<a href="http://italomoralesf.me">Web Personal - Italo Morales F.</a>
<a href="https://instagram.com/italomoralesf">Mi perfil</a>

Aquí tenemos un enlace que comienza con https://, también otro que termina en .me y finalmente un enlace que incluye la palabra instagram en su valor.

[href^='https://'] {
    font-style: italic;
}
[href$='.me'] {
    font-weight: bold;
}
[href*='instagram'] {
    background-color: #00aced;
}

Si tienes por ejemplo <div class="php-tutorial"></div> podemos ver de igual forma un comienzo, texto intermedio y un final en el valor. En otras palabras podemos aplicar un estilo con los signos de coincidencias que acabamos de aprender ^, $ y *.

Libro de TDD - Lo que debes saber
Compra el libro
TDD lo que debes saber

Newsletter

Únete a más de 4.000+ personas y no te pierdas nunca más de las nuevas clases, tips, tutoriales y más cada semana.

    No enviamos spam. Puedes darte de baja en cualquier momento.