CSS 3: selectores de atributo

[att]

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