Fundamentos de CSS: Selectores Parte II

Selectores CSS: Fundamentos

Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. 
Esta es la segunda parte sobre Selectores CSS.

Atributos

Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes como son. Los atributos (Attributes) nos permiten dar mas información sobre los elementos HTML, se muestran como pares nombre/valor. Algunos ejemplos son:

name=element name
target= _blank
lang= language
title= element title
alt= alternative information
href= provides an address information

Algunos atributos se muestran por defecto en forma de tooltip cuando hacemos hover sobre el elemento como el titulo (title) de dicho elemento. Otros como <img> contienen atributos ancho y altura pero no son mostrados al usuario de ninguna forma. Los estandares de HTML5 no requieren el uso de minusculas en nombre de atributos pero siempre es una buena practica. Otra cosa muy importante es recordar que estos atributos HTML proveen información a la pantalla del usuario y son una importante parte de la accesibilidad.

CSS nos permite manipular elementos HTML que tengan atributos específicos desde que se especifique !DOCTYPE. La estructura que usamos en CSS es un poco diferente a la de HTML. Veamos algunos:

a[target="_self"]{
background-color aqua;
}

Selector [attribute~=value] 

Muy similar al attribute/value, pero si prestamos atencion hay un tilde despues del "=". Esta estructura dice a CSS que seleccione el elemento con el valor que contiene una palabra específica, como el que sigue:

[title ~= "development"]{
text-decoration: underline;
}

Selector [attribute|=value] 

Este atributo usa una barra vertical (|) seguida del signo de igual (=). Esto nos dice a CSS que agarre el elemento con el atributo especificado iniciando con un valor específico. En el ejemplo seleccionamos un elemento con una clase que tiene un valor que inicia con "container". Atención a esto: EL valor tiene que tener toda la palabra como class="container" o class="container-main".

[class|="container"]{
text-shadow: 2px 1px #000;
}

Selector [attribute^=value]

Aqui se pueden complicar un poco las cosas porque este atributo te permite hacer mas o menos lo mismo que con "attribute/value", pero en este caso no necesitas toda la palabra. Veamos:

[class^="container"]{text-decoration: underline;}

Selector [attribute$=value]

Este atributo nos permite seleccionar elementos donde el valor TERMINA con un valor especifico y no necesita ser toda la palabra. En el ejemplo seleccionamos todos los elementos con una clase que termina con "borders", puede ser center-borders left-borders etc:

[class$="borders"] {background: aqua;}

Selector [attribute*=value]

Este atributo nos permite seleccionar elementos en los que el valor contenga un valor específico y no necesariamente toda la palabra. Veamos el ejemplo:

[class*="tip"] {background: aqua;}

Selector [attribute]

Aqui el atributo nos permite seleccionar un elemento HTML con un valor especifico, como el ejemplo:

a[target="_blank"] {background: aqua;} a[title="the tools"] {background: aqua;} a[alt="images"] {background: aqua;}

Por hoy es todo, atentos a la Parte 3:

Aqui les dejo el Pos Original en: CSS Fundamentals Part 9: Selectors

Para saber mas sobre HTML, CSS3 y Desarrollo móvil: Pablo M. Francisco