Category Archives: Web

Selectores CSS avanzados

Posted on by
Reply

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:

Continue reading →

Selectores CSS

Posted on by
Reply

Etiqueta: Se aplican a todas las labels del tipo indicado.

p {...}

.Clase: Se aplican a todoas las etiquetas.

<span class="myClase"></span>

.myClase{...}

Etiqueta.Clase: Se aplican a todas las etiquetas del tipo y clase indicados. (Elementos que aparecen varias veces en el HTML).

<span class="myClase"></span>

span.myClase{...}

#Identificador: Se aplica al elemento con el identificador dado. (Debería ser único en el HTML).

<span id="myId"></span>

#myId{...}

Etiqueta#Identificador: Se aplica a la etiqueta con el identificador dado.

<span id="mySpan"></span>

span#mySpan{...}

Etiquetas anidadas: Se aplica a las etiquetas que se encuentren anidadas dentro de otras. Por ejemplo, todos los enlaces, etiquetas <a> que se encuentren dentro de etiquetas <span>.

<span>
<a href.../>
</span>

span a{...}

Los selectores por clase e identificadores pueden combinarse con los selectores anidados, de este modo podemos aplicar un estilo a etiquetas anidadas dentro de otras que tienen un identificador o clase dados:

.box span{...}
#box span{...}

Selectores por estado: Se aplica a identificadores con que se encuentran en un estado determinado. Por ejemplo, un enlace podría encontrarse en estado visitado o no visitado.

/* No visitado */
a:link{...}
/* Visitado */
a:visited{...}
/* Ratón encima */
a:hover{...}
/* Pulsado (por ejemplo en menús) */
a:active{...}
/* Con el foco (por ejemplo en etiquetas <input type="text" />)*/
:focus{...}

Agrupación de selectores: La agrupación permite aplicar el mismo estilo a varios selectores.

#myDiv, #mySpan {...}

—

Más información: