Introducción a CSS Al igual que los selectores de clase


Introducción a CSS
Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo
que tenga un atributo id igual al indicado:
p#aviso { color: blue; }
A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas
HTML diferentes.
En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos.
No debe confundirse el selector de ID con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estén dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos con
atributo id="aviso" de la página */
p, #aviso { ... }
2.1.6. Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales de combinación de selectores..aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }
Ahora, el selector solamente selecciona aquellos elementos de tipo con un atributo class="especial" que estén dentro de cualquier elemento de tipo
que tenga un atributo
class="aviso".
La combinación de selectores puede llegar a ser todo lo compleja que sea necesario:
ul#menuPrincipal li.destacado a#inicio { ... }
El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo

  • con un atributo class igual a destacado, que forma parte de una lista
      con un atributo id igual a menu Principal.
      Fuente: www.librosweb.es
      Introducción a CSS
      Javier Eguíluz Pérez
  • Entradas populares de este blog

    CERRAR SESIÓN o APAGAR EL EQUIPO.

    Curso Excel 2010 4.3. Ampliar o reducir una selección

    GLOSARIO CV: Tag