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:
Juan Carlos Sánchez's Blog 