Después de ver algunos de los selectores CSS más básicos, en este post muestro un resumen de algunos selectores más avanzados.
Referencia: http://www.w3schools.com/cssref/css_selectors.asp
HTML de ejemplo:
<html> <head> <meta charset="utf-8" /> <title>CSS Selectors tests</title> <link href="css/selectoresAvanzados.css" rel="stylesheet" /> </head> <body> <ul id="lista1"> <li>Descendiente directo de ul con id="lista"</li> </ul> <p class="contiguo" /> <p>Elemento inmediatamente contiguo a p con class="new"</p> <ul id="lista2"> <li>Primero (rojo)</li> <li>Segundo</li> <li class="last">Ultimo (azul)</li> </ul> <p class="linea">CSS Selectores <br />avanzados</p> <a href="www.google.es" id="buscador-google" title="Buscador">Google</a> <a href="www.facebook.es" id="redsocial-facebook" title="Red Social">Facebook</a> <a href="www.yahoo.es" id="buscador-yahoo" title="Buscador">Yahoo</a> <p lang="es">Hola CSS!</p> <p lang="en">Hello CSS!</p> </body> </html>
CSS con algunos selectores avanzados:
/* Descendiente directo de ul con identificador "lista" */ ul#lista1 > li { font-weight: bold; } /* Elemento contiguo de p con clase "contiguo" */ p.contiguo + p { font-weight: bold; } /* Elementos li que sean primer hijo del padre */ li:first-child { color: red; } /* Elementos li que sean ultimo hijo del padre y además tengan la clase "last" */ li.last:last-child { color: blue; } /* Primera linea de p clase linea*/ p.linea:first-line { color: green; } /* Primera letra de p clase linea*/ p.linea:first-letter { font-size: 3em; } /* Selector de todos los elementos a con el atributo title definido */ a[title] { font-size: 2em; } /* Selector de todos los elementos a con el atributo title definido y con valor "Buscador" (case-sensitive) */ a[title="Buscador"] { color: green; } /* Selector de todos los elementos a con el atributo href vacío */ a[href="#"] { color: red; } /* Selector de todos los elementos a con el atributo id definido y que empiece por buscador seguido de '-' o que sea igual a buscador*/ a[id|=buscador] { background-color: orange; } /* Selector de todos los elementos a con el atributo title definido y que contenga la palabra "Red" */ a[title~=Red] { background-color: aqua; } /* Selector de idioma */ :lang(en) { font-style:italic; }
Finalmente, el resultado obtenido:
—
Más información: