Fundamentos de CSS: Selectores

Selectores CSS: Fundamentos

Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. 


Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos.
Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducción.

Vamos al tema.

Cuando se trata se Selectores CSS, tenemos mucho para ver, puede ser un poco confuso al princípio pero te lo explicaré de forma sencilla.

Selectore no son otra cosa que los mismos elementos HTML que tenemos en nuestros documentos HTML, todas las etiquetas (tags) que usamos para estructurar nuestros documentos se convierten en Selectores CSS en nuetras Hojas de Estilo. Algunos de estos Selectores son bastante familiares para nosotros y son parte del lenguage de maquetació o armado HTML y otros son estructurados de forma diferente y son parte apenas del "lenguage" CSS.
CSS tiene diferentes versiones, cada una ha definido o introducido nuevos Selectores. Pero no es el tema deste post. Veremos aqui la lista de Selectores.

• Selector Elemento
• Selector Class
• Selector ID
• Selector Atributo
• Pseudo (class) 

Selector Elemento

Llevan el mismo nombre que el elemento en HTML para poder manipularlo. Si tenemos un párrafo en nuestro documento HTML, este es un elemento (etiqueta), pero si lo queremos manipular en CSS entonces nuestro "p" se convierte en un Selector CSS, desta forma podemos aplicar una séria de reglas/estilos para alterarlo.

En resumen todo  elemento (etiqueta) HTML es un Selector CSS siempre que tenga un nombre predeterminado en HTML. Veamos el ejemplo:

p {text-align:center;}

Selector ==>p en html==><p></p>

Selector Class

Clases (class) son grupos de reglas que creamos y nombramos como mejor nos parezca. La ventaja de trabajar con Clases es que no les pasa lo mismo que a las IDs, pues los podemos reusar y aplicar la misma clase a varios elementos HTML, con lo que tendremos que con un Block de código afectará múltiples elementos, de esta manera simplificamos código.

Podemos nombrar las Clases como queramos pero en CSS Siempre empiezan con un Punto (.) seguido del nombre de la clase. Pueden contener caracteres especiales, mayúsculas, minúsculas y números (aunque números no son recomendables).

En el ejemplo vemos como manipulamos una clase llamada miclase.

.miclase {text-align:center;}

A tener en cuenta sobre las Clases.

• Clases no son únicas.
• podes atribuir una clase a varios elementos.
• Podes tener elementos con múltiples clases.
• Ponerle una clase a un elemento HTML no hace por defecto, necesitas atribuir reglas/estilos en CSS

Selector Id

Este usa la "iD" atribuída a un elemento HTML para seleccionarlo. Las "IDs" en HTML son únicas, podemos darle cualquier nombre pero no podemos atribuir la misma ID a mas de un elemento HTML en el mismo documento. En HTML la ID es un nombre precedido por el atributo id "id="nombre", pero en CSS la usamos precedida por # (hash). Veamos el ejemplo.

En HTML:

<div id="box1"></div>

Ahora le aplicamos las reglas/estilos en CSS

#box1 {text-align:center;}

A tener en cuenta sobre las IDs

• IDs son únicas.
• Cada elemento puede tener apenas una ID.
• Cada documento puede tener apenas un elemento con esa ID.
• Darle una ID a un elemento HTML no hace nada por defecto, necesitas atribuir reglas/estilos en CSS.
• Cuidado con elementos HTML que ya tengan una ID atribuida, si la cambias pueden ocurrir errores, por ejemplo si esta ID fué asignada para disparar un Script.

Por hoy hasta aqui llegamos para no dejar el post muy largo. En el próximo explicaremos sobre Atributos y Pseudo Clases.

Y como prometido, aqui les dejo los links para seguir a Maria Kovacs:

Blog: IFuckingLoveCoding

Twitter: MariaKovacs

Pablo M. Francisco