IV. Agrupación de selectores

Para reducir el tamaño de las hojas de estilo, se pueden agrupar los selectores que comparten las mismas propiedades. Separaremos con comas(,) los selectores agrupados.

Agrupando Selectores de Tipo

Tenemos los siguientes selectores de tipo que comparten la propiedad "font-family: arial" de este modo:

h1 {font-family: arial;}
p {font-family: arial;}
h3 {font-family: arial;}

h1, p, h3{ font-family: arial } 

body, div, p, ul, li, h1, h2, h3 {padding:0px; margin:0px;} 

Del mismo modo podemos agrupar selectores de clases, selectores ID o una combinación de ambos

Agrupando selectores de clase, selectores ID

Tenemos los selectores de clase:

.mensaje {color:#0000FF;}
.subtitulo {color:#0000FF;}
.enfasis {color:#0000FF;}

.mensaje, .subtitulo, .enfasis{color:#0000FF;}

#contenedor, #menu, #piepagina{padding:5px;}

Agrupando selectores descendientes.

#colum4 h1 {color:#008800;}
p em{color:#008800;}

lo cual es equivalente a:

#colum4 h1, p em{color:#008800;}

Agrupando varios tipos de selectores a la vez

.titulo {color:#008800;}
#contenedor h1 {color:#008800;}
.cabecera h2 em {color:#008800;}
h3 {color:#008800;}

.titulo, #contenedor h1, .cabecera h2 em, h3{color:#008800;}