Siguiendo un poco más la información sobre los selectores que tratamos en el anterior post, esta vez vamos a ampliar un poco como usarlos y como referenciar correctamente a los diferentes elementos de nuestro código HTML desde la CSS para poder aplicarles el estilo que deseemos.

Para hacerlo más clarificador pondremos primero (en color anaranjado) como se escribiría nuestro selector en la CSS y luego explicaremos a que hace referencia.

Nota: El uso de id (#) o class (.) es indistinto y en los siguientes ejemplos es a título informativo. Las siguientes especificaciones son para CSS 2.1, por lo que determinadas versiones de navegadores pueden no aceptar algunos de estos selectores.

• #e1{}
  Forma más básica. Con esta instrucción definimos los estilos para nuestro elemento cuyo identificador es e1: <div id=”e1″></div>
• div.e1{}
  Selector para definir los estilos que afectarán a aquellos elementos <div> cuya clase sea e1: <div class=”e1″></div>
  A diferencia del primer caso expuesto, este sólo afectaría a elementos tipo <div>, mientras que en el ejemplo primero, podríamos usar la misma especificación id=”e1″ en un <table>, en un <p>, etc.
• #e1 #f1{}
  De esta manera vamos a especificar los estilos para nuestros selectores f1 que estén contenidos dentro de un selector e1: <div id=”e1″><div id=”f1″></div></div>
  Esta especificación NO afectaría nunca a aquellos selectores f1 que no estén contenidos dentro de e1
• #e1,#f1{}
  Separados por comas, estamos aplicando los mismos estilos tanto para los id=”e1″, como para los id=”f1″.
• div.e1:first-line{}
  Afectaría a toda la primera linea de una capa los div cuya clase fuera e1. Se usaría por ejemplo para remarcar la primera línea de un texto.
• div.e1:first-letter{}
  Hace la misma función que el anterior pero en este caso no afecta a toda la primera línea, sino exclusivamente a la primera letra: Sería algo parecido a lo que se realiza en muchas publicaciones de periódicos donde la primera letra del texto aparece muy remarcada (incluso con un cuerpo 5 veces mayor al del texto).
• a:link{}
  Una de las más utilizadas y sirve para aplicar propiedades a enlaces no visitados.
• a:visited{}
  Si la anterior era para enlaces no visitados, esta es para los enlaces visitados.
• a:hover{}
  En este caso serían los estilos cuando estamos sobre el elemento, como para destacarlo. A diferencia del :link y el :visited, la propiedad :hover no es exclusiva de los enlaces y se puede aplicar a otros tags diferentes, como por ejemplo a un <tr> cuando nos interesa que al posicionarse sobre él se destaque toda una columna en un color distinto.
  Mucho ojito con es uso de esta propiedad para otros elementos no enlaces y el maravilloso I.E., pues según la versión puede que no haga lo que deseemos.
• a:active{}
  Estilos para un botón cuando esta activado (tiempo entre que se pulsa un botón y se suelta). Como en el caso del hover, esta propiedad no es exclusiva de los enlaces.
• input:focus{}
  Estilo que se utiliza para cuando un elemento tiene el foco, como sería el caso de cuando queremos aplicar un estilo diferentes a un campo <input> de formulario cuando lo marcamos para rellenarlo.
• #e1:before{}
  Instrucción para aplicar un contenido antes de un elemento cuyo identificador es e1
• #f1:after{}
  Exactamente como el anterior pero en este caso aplicamos contenidos tras los elementos identificados con f1.
• input[type="submit"]{}
  En este caso el estilo lo aplicaríamos a todos los <input> de nuestra página cuyo atributo type sea submit (p.e. para darle estilo al botón de enviar de un formulario). Se utiliza esta forma poniendo el atributo que define al elemento dentro de corchetes para marcar a que elemento queremos dar estilo. Debo advertir que para según que versiones de I.E. hay que ir con cuidado con esta función porque puede no funcionar.

A partir de esta base podemos hacer selecciones a priori complicadísimas para definir el estilo de una parte concreta de nuestra web.

Pongamos por ejemplo que tenemos marcado un listado de puntos del tipo <ul><li> que heredan el estilo general definido en la página para estos listados,pero queremos darle un estilo especial a uno de estos listados para cambiarle el color y destacar en concreto esos puntos. Lo ideal sería aplicarle una clase nueva a este <li> y definirla en nuestra CSS pero en ocasiones puede ocurrir  que no podamos modificar el código por alguna razón o simplemente que gracias a conocer “como llegar hasta allí” no necesitemos hacerlo. Para este caso lo complico un poco mas y pongo este listado dentro de una tabla:

• div#div1 table.comentarios td ul li{ color:#ffcc00;}
  En este caso estamos diciéndole que nos modifique el color de los elementos <li> contenidos dentro de una lista <ul> que se encuentran dentro de una tabla  cuya clase es “comentarios”, y que a la vez se encuentra dentro de un <div> cuyo identificador es div1.

Aunque pueda parecer complicado se trata de seguir como una especie de camino de migas hasta llegar al sitio concreto que queremos modificar. Toda una tarea de investigación en según que casos.