Agrupación de selectores

<< Selectores II Selector descendiente >>

Si queremos asignar el mismo estilo CSS a varios selectores distintos, en lugar de crear el mismo bloque para cada selector, una buena práctica es simplificar nuestro CSS agrupándolo mediante una coma (,).

button.btn-page{
    border-radius: 5px;
    background-color: darkcyan;
    color: white;
}

p{
    border-radius: 5px;
    background-color: darkcyan;
    width: fit-content;
    padding: 1px;
    border: 2px solid black;    
    color: white;
}

De esta manera, el código anterior lo podríamos simplificar e indicarle al navegador que estas propiedades CSS se las aplique al conjunto de selectores indicado.

button.btn-page, p{
    border-radius: 5px;
    background-color: darkcyan; 
    color: white;
}
p{
    width: fit-content;
    padding: 1px;
    border: 2px solid black;   
}

Una buena práctica para mejorar la legibilidad del código CSS es poner cada selector en lugar de uno detrás de otro, ponerlo cada uno en una línea separada. Esto hacemos que en grandes documentos CSS sea más fácil de leer y por tanto de revisar/modificar/mantener nuestro CSS.

button.btn-page, 
p{
    border-radius: 5px;
    background-color: darkcyan; 
    color: white;
}
p{
    width: fit-content;
    padding: 1px;
    border: 2px solid black;   
}

<< Selectores II Selector descendiente >>