Selectores CSS avanzados

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:

HTML + CSS

Más información:

Advertisements

Your feedback is important...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s