CSS 3: selectores de atributo -->

[att]

Volver arriba
Esto: <style>
#ejemplo1 a[id]{color:#0C6;margin:0 0.5em 0 0.5em}
</style>
<p id="ejemplo1">
<a href="#" id="l1">link 1</a>|<a href="#" id="l2">link 1</a>|<a href="#" >link 1</a>
</p>
Se ve así:

link 1|link 1|link 1

[att=val]

Volver arriba
<style>
#ejemplo2 a[href="#"]{color:#666; font-weight:bold; margin:0 0.5em 0 0.5em;}
</style>
<p id="ejemplo2">
<a href="#" id="l1">link 1</a>|<a href="" id="l2">link 1</a>|<a href="#" id="l3">link 1</a>
</p>
Se ve así:

link 1|link 1|link 1

[att~=val]

Volver arriba
<style>
#ejemplo3 a[rel~="reg"]{ color:#0C6; font-weight:bold; text-decoration:underline;}
</style>
<p id="ejemplo3">
<a href="#" rel="first reg">&laquo;</a>
<a href="#" rel="prev reg">&lt;</a>
<a href="#">3</a>
<a href="#" rel="next reg">&gt;</a>
<a href="#" rel="last reg">&raquo;</a>
</p>
Se ve así:

« < 3 > »

[att|=val]

Volver arriba
<style>
#ejemplo4 a[lang|="es"]{background-color:#FF0; color:#F30;}
</style>
<p id="ejemplo4">
<a href="#?lan=en-EN" lang="en">English version</a>
<a href="#?lan=es-ES" lang="es">Versión española</a>
<a href="#?lan=fr-FR" lang="fr">Vérsion française</a>
</p>
Se ve así:

English version Versión española Vérsion française

[att^=val]

Volver arriba
<style>
#ejemplo5 a[href^="http://www."]{background-color:#FF0; color:#F30;}
</style>
<p id="ejemplo5">
<a href="http://www.google.es">Google</a>
<a href="http://www.altavista.es">Altavista</a>
<a href="buscador.php">Este mismo</a>
</p>
Se ve así:

Google Altavista Este mismo

[att$=val]

Volver arriba
<style>
#ejemplo6 a[href$=".html"]:after{content: " (web estatica)"}
</style>
<p id="ejemplo6">
<a href="pagina1.html">pagina 1</a>
<a href="pagina2.aspx">pagina 2</a>
<a href="pagina3.jsp">pagina 3</a>
<a href="pagina3.php">pagina 4</a>
</p>
Se ve así:

pagina 1 pagina 2 pagina 3 pagina 4

[att*=]

Volver arriba
<style>
#ejemplo7 a[href*="raqueta"]{background:#0FF;}
</style>
<p id="ejemplo7"> <a href="http://www.tiendadeporte10.com/index.jsp?raqueta=3">enlace 1</a>
<a href="http://todaslasraquetas.com">enlace 2</a>
<a href="http://tenispadelypingpong.com">enlace 3</a>
<a href="http://fernando.blogspot.com/mi-raqueta-nueva">enlace 4</a>
</p>
Se ve así:

enlace 1 enlace 2 enlace 3 enlace 4