Combinadores y filtros de selectores

// ----------------------- CÓDIGO HTML -------------------------- 

<!-- EJEMPLOS SELECTORES XPATH --------------- --> 

<h4>Combinadores y filtros de selectores</h4>

<table id='paises'>
    <tr>
        <td class='tdHorizontal'>España</td>
        <td class='tdHorizontal'>Inglaterra</td>
        <td class='tdHorizontal'>Grecia</td>
    </tr>

    <tr>
        <td class='opacidad'><a href='mailto:mail@mail.es'>Link Email</a></td>
        <td><a href='https://maps.google.es...'>Scotland</a></td>
        <td><a href='http://otro.maps.google.es...'>Acaya</a></td>
    </tr>

    <tr>
    
        <td>
            <table class='subTabla'>
                <tr>
                <td>Galicia
                <table>
                    <tr>
                        <td>Lugo</td>
                    </tr>
                    <tr>
                        <td><a href='javascript:void(0);'><acronym title=
                            'vinculo sin localizar'>Ourense</acronym></a></td>
                    </tr>
                    <tr>
                        <td>Pontebedra</td>
                    </tr>
                </table>
            </td>
            </tr>
        </table>
        
        </td>
        <td>Yorkshire</td>
        <td class='opacidad'>Etolia</td>
    </tr>

    <tr>
        <td>Andalucia</td>
        <td class='opacidad'>Gales</td>
        <td>Tesalia</td>
    </tr>

</table><!--paises--> 

<div class='clear'> </div><!--clear--> 

<div id='vinculos'>    

    <p class='ejemPaises'>Párrafo con contenido (<a href='mailto:mail@mail.com' 
    	      title='Email'>selectores XPath</a>) de 
              <a href='http://www.jquery.com' title='URL'>jQuery</a>.
    
    <br />
    
    <a href='javascript:void(0);' title='archivo PDF'>XPath</a> 
    	     identifica diferentes <a href='javascript:void(0);'>
             <acronym title='vinculo sin localizar'>elementos</acronym></a>
             y sus <span class='vervalor'>val<span class='padre'>or</span>es</span>
    
    <br />
    
    de un documento <strong>XML</strong>.</p>
    
    <p class='ejemPaises'><a href='javascript:void(0);' onClick='ocultaLink();'>
    	      Ocultar los vínculos Tabla</a> con jQuery</p>
    
    <form  class='ejemPaises' action='#' enctype='text/plain'>
    
        <input type='button' id='btn' title='Mostrar Links' 
        value='Mostrar vínculos Tabla' onClick='mostrarLink();' />
        
        <input type='button' id='btn' title='Mostrar u Ocultar la tabla'
        value='Ocultar o Mostrar todos los links' onClick='mostrarOcultar();' />
    
    </form>

</div><!--vinculos-->  

// ------------------- CÓDIGO JQUERY ------------------- 


<script type='text/javascript'>

// EJEMPLOS DE SELECTORS XPATH ------------------ 

jQuery(document).ready(function(){
	
	// Centrar tabla 
	$('#paises').css('margin', 'auto');
	
		
/* Indicamos un selector al que queramos
     aplicarle una clase '#paises'. */
    /* Pero utilizamos un 'combinador', que
     indica a que parte del documento queremos
     que se aplique la clase, ('>'), en este
     caso indica a los hijos directos ('td'). */
     /* Con el método '.addClass()' indicamos 
     la clase a aplicar 'tdHorizontal'. */ 
  $('#paises > td').addClass('tdHorizontal');
     
  /* Aplica estilos de la clase 'subCeldas'
     para todas las celdas excepto las que 
	 tengan la clase 'tdHorizontal' aplicada. */ 
  $('#paises td:not(tdHorizontal)').addClass 
  ('subCeldas');
  
  /* Para los vínculos 'a' de 'td', hijos de ID 
     '#paises', aplicamos otra clase 'tdLink' */ 
  $('#paises td > a').addClass('tdLink');

  /* Celda anidada */
    /* A tabla anidada 'subTabla'le 
	   aplicamos otra clase '.tdAnidado' */ 
  $('#paises table.subTabla td').addClass
  ('tdAnidado');

  /* :contains('palabra'), Selecciona todos los
     textos que contengan la palabra 'valores' y 
     les aplica el CSS indicado. */ 
  $("p.ejemPaises .vervalor:contains('valores')")
  	.css("text-decoration", "underline") /* subrrayado */ 
	.css("background-color", "#2F6A8C") /* azul oscuro */ 
	.css("color", "#D1EFFF"); /* azul claro */ 
  
  /* Alinear centralmente todos los párrafos */ 
  $('p.ejemPaises').css('text-align', "center");
  
  /* :header, selecciona las cabeceras y 
     aplica dos estilos directamente. */ 
  $('h4:header').css('color', '#069').css('text-align',  
  'center'); /* Azul */

  /* Selector parent(), obtiene el padre directo 
      de un elemento. Si la selección es de un 
      grupo de elementos, obtiene un grupo de 
      sus padres directos únicos. */ 
  $(".padre").parent(".vervalor").css("background", 
  "#00CED1"); /* DARKTURQUOISE */ 


	
  /* Filtro ":parent", selecciona todos los elementos  
      que tienen hijos, incluidos los nodos de 
      texto. ':empty' es el selector inverso. */ 
  $("td.opacidad:parent").fadeTo(2000, 0.4); 
  /* Desvanece el texto al "4% en 2 segundos con 'fadeTo' */ 


	// Links que empiecen con 'mailto:' 
	$('a[href^="mailto:"]').addClass('emailvinculo');
	// Links con título terminado en 'PDF' 
	$('a[title$="PDF"]').addClass('pdfvinculo');
	// Links que contengan 'google.es' en cualquier
	// parte dentro de la etiqueta 'a'. 
	$('a[href*="google.es"]').addClass('webvinculo');


});


/* FUNCIONES VISUALES ºººººººººººººººººººººººººº */ 
		
		function ocultaLink(){
			/* Ocultar enlaces Tabla */ 
			$('table#paises tr td > a').hide(300);
			/* Ocultar span '.vervalor' */ 
			$('this.vervalor').hide(300);
		}
		
		function mostrarLink(){
			/* Mostrar enlaces Tabla */ 
			$('a').show(300);
			/* Mostrar span '.vervalor' */ 
			$('this.vervalor').show(300);
		}
		
		function mostrarOcultar(){
			// Mostrar 'links' que están ocultos
			// Ocultar 'links' que están visibles 
			$('a').toggle(300);
		}

</script> 


// --------------------- CÓDIGO CSS ----------------------- 

<style type='text/css'>

/* EJEMPLO DE SELECTORES XPATH ------------------ */ 

h4.ejemXpath {
	font-size: 14;
	color: #2F6A8C; /* azul */ 
	text-align: center;
}
table#paises {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
}
.subCeldas {
	color: #6E6D6D; /* gris fuerte */ 
	background-color: #E6E6E6; /* gris suave */ 
}
.subCeldas:hover {
	background-color: #6699CC; /* azul */ 
	border-color: #366; /* azul */ 
}
.tdHorizontal {
	color: #FFFFFF;
	background-color: #CCCCCC; /* gris */ 
}
.tdLink {
	text-decoration: none;
	color: #2A91CC; /* azul */ 
}
.tdLink:hover {
	color: #E6E6E6; /* gris */ 
}
.tdAnidado {
	margin-left: 15px;
	color: #FFF; /* blanco */ 
	background-color: #4F4F4F; /* gris fuerte */ 
}

a {
	color: #A52A2A; /* BROWN */ 
}
.emailvinculo {
	color: #060; /* verde */ 
	text-decoration: none;
}
.pdfvinculo {
	color: #FF0; /* amarillo */ 
	text-decoration: none;
	background-color: #2A91CC; /* azul */ 
	border-bottom: 1px dotted #6495ED; /* CORNFLOWERBLUE */ 
}
a.webvinculo {
	color: #666; /* gris */ 
	background-color: #F9C; /* rosa */ 
}

form.ejemPaises {
	width: 378px;
	margin: auto;
}

</style>