CSS, Curso Intensivo – Lección 04, Selectores

Los selectores de tipo permiten seleccionar todos los elementos de un documento HTML que pertenezcan a ese tipo, si declaramos reglas usando el seleccionador ‘h1’, todos los elementos h1 usaran esas reglas para su visualización. Para especificar elementos que queremos que se visualicen de manera diferente aun siendo del mismo tipo, se usan los selectores de Clase (class) y los selectores de Identificación (id)

Selectores de Clase

Los selectores de clase seleccionan un sub-set de elementos definidos por medio de un atributo html denominado ‘class’ seguido del valor por el cual nosotros queramos llamar esa ‘clase’.

En el CSS, se declara el bloque de reglas usando el nombre antecedido por un punto:

.parrafo-claro{
    color: #333333;
}

En el HTML se adiciona un atributo ‘class’ a cada elemento que queremos estilizar con la clase definida:

<p class=”párrafo-claro”>texto de contenido</p>

Uso de múltiples clases

El atributo ‘class’ permite adicionar múltiples clases al elemento, de manera que se puedan construir elementos más complejos de manera modular. Simplemente deje un espacio entre clase y clase.

.parrafo-claro{
    color: #333333;
}
.tamano-mediano{
    font-size: 24px;
}

<p class=”párrafo-claro”>texto de contenido</p>
<p class=”párrafo-claro tamaño-mediano”>texto de contenido 2</p>

Nomenclatura

Para crear clases se debe iniciar con una letra mayúscula o minúscula, se puede usar guión o dash ‘-’, o guion abajo o underscore ‘_’, no se puede usar espacios, se pueden usar números y puntos sin ser usados como el primer carácter del nombre.

Selectores de Identificación

Los selectores de identificación seleccionan un elemento único definido por medio de un atributo html denominado ‘id’ seguido del valor por el cual nosotros queramos llamar ese ‘id’.

En el CSS, se declara el bloque de reglas usando el nombre antecedido por el símbolo ‘#’:

#parrafo-claro{
    color: #333333;
}

En el HTML se adiciona un atributo ‘id’ al elemento que vamos a identificar como único:

<p id=”párrafo-claro”>texto de contenido</p>

Agrupación de Selectores

Agrupar selectores permite que el proceso de visualización del documento sea más rápido y eficiente, además de ser una buena práctica que permite a los usuarios acceder a los contenidos de manera más rápida y a los diseñadores tener mayor control de los elementos de diseño de acuerdo a las jerarquías.

Solo hay que separar los diferentes selectores que se quieren agrupar por medio de comas, en el ejemplo todos los elementos h1, h2 y h3 compartiran las mismas reglas, al igual que los elementos ‘p’ y los elementos que tengan adicionada la clase ‘tamano-mediano’:

h1, h2, h3{
    font-style: bold;
}

p, .tamano-mediano{
    font-style: normal;
    font-size: 24px;
}