Debes ver el vídeo CSS: selectores básicos (1) en el que se muestran diferentes tipos de selectores de CSS, como el selector de tipo (elemento o etiqueta), el selector de clase y el selector de identificador, se explica la selección de etiquetas anidadas y la agrupación de reglas.
https://www.youtube.com/watch?v=EyVR_zjLDCQ
CSS es un lenguaje muy sencillo que se compone de reglas.
Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. En este ejemplo, el selector es el elemento de HTML <h1>, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web.
Cada declaración de estilos se define entre llaves, y está formada por parejas propiedad valor. En este ejemplo, a los elementos de tipo <h1> se le aplican dos propiedades: en la primera propiedad se indica que el color del texto debe ser rojo; en la segunda propiedad se indica que el color de fondo debe ser verde.
¿Qué tipos de selectores existen en CSS?
Los selectores de CSS3 están definidos en el documento “Selectors Level 3”, una recomendación del W3C de septiembre de 2011.
https://www.w3.org/TR/2018/CR-selectors-3-20180130/
La lista de selectores definidos en CSS3 es enorme.
En este capítulo vamos a ver los selectores básicos definidos en CSS1 y CSS2. En los siguientes capítulos veremos los selectores avanzados y las novedades que incorpora CSS3.
Existen tres selectores básicos fundamentales: de Tipo, de clase, y de Identificador.
SELECTOR DE TIPO
El selector de Tipo también es conocido como selector de Elemento o selector de Etiqueta.
Este selector hace referencia a todos los elementos o etiquetas de un mismo tipo.
Para seleccionar una etiqueta, hacemos referencia a esa etiqueta en nuestro código CSS.
En este ejemplo, se han definido dos reglas de CSS.
En la primera el selector es h1 y se aplica al único encabezado de nivel 1 que hay en el código HTML.
En la segunda regla el selector es span y se aplica a todos los <span> que hay en el código HTML.
Como puedes observar, es un selector poco específico y se aplicará a todas las etiquetas de ese tipo en el documento en el que se incluya este código CSS.
SELECTOR DE CLASE
El atributo “class” es un atributo global, común a todas las etiquetas HTML, permite especificar las clases que se aplicarán a un determinado elemento.
En CSS, los nombres de las clases vienen precedidos por el carácter “.”; es imprescindible que recuerdes incluir este carácter en CSS y no lo incluyas en el atributo “class” de las etiquetas en HTML, un error muy común en los primeros desarrollos de cualquier persona.
En el ejemplo puedes ver cómo se aplica la clase .box a la etiqueta <div>.
Este tipo de selector se aplicará a todas las etiquetas cuyo atributo “class” lo incluya, esto se ilustra en el ejemplo mediante la clase .bold, aplicada a varios elementos distintos (dos etiquetas <span> y un enlace).
Como puede que ya sepas, el atributo “class” permite múltiples valores separados por espacio, de forma que podemos aplicar multitud de clases a una misma etiqueta. Esto favorece la reutilización de reglas, en lugar de tener repetir ciertas reglas una y otra vez.
Por ejemplo, puedes ver cómo la última etiqueta <span> aplica dos clases, una para el estilo de fuente y otro para el color.
COMBINACIÓN DE SELECTORES
En este ejemplo, la regla CSS combina “span”, un selector de tipo, con “.bold”, un selector de clase. Esta combinación se aplica solo a las etiquetas <span> que tengan la clase .bold.
SELECTOR DE IDENTIFICADOR
El tercer selector, más específico, y no por ello menos importante, es el selector de identificador.
Se diferencia del selector de clase en dos aspectos fundamentales:
Primero, el carácter inicial en el código CSS es “#”, en lugar del “.”.
Segundo, se aplica a aquellas etiquetas cuyo atributo “id” coincida con el texto tras la “#”.
Recuerda que el atributo “id” se supone único en el documento HTML, por tanto, una regla de identificador sólo se aplicaría una vez en toda una página web. Sin embargo, el valor de un “id” se puede repetir entre diferentes páginas web.
COMBINACIÓN DE SELECTORES PARA SELECCIONAR ETIQUETAS ANIDADAS
Para aplicarles una regla exclusivamente a las etiquetas <span> anidadas a la etiqueta <div> del ejemplo, con todo lo aprendido hasta ahora, no nos quedaría más remedio que modificar el código HTML.
Sin embargo, si utilizamos combinaciones de selectores, podemos aplicar la regla solo a las etiquetas <span> que estén anidadas en etiquetas <div> mediante la regla “div espacio en blanco span”, o a todos los hipervínculos que estén en el interior de una etiqueta <span> mediante “span espacio en blanco a”.
Como ves, para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML.
En este otro ejemplo, te muestro cómo aplicar estilos a todas las etiquetas <span> que estén anidadas en etiquetas con la clase .box.
Del mismo modo que en el ejemplo anterior, especificamos en primera instancia el selector de clase .box y después, separado por espacio en blanco, el selector de etiquetas span.
El resultado final del ejemplo anterior también se puede lograr si se usa el selector de identificador “myDiv” en vez de la clase “.box”.
Y ahora al ejemplo anterior le añado otra regla de CSS.
El ejemplo muestra cómo aplicar un estilo a las etiquetas <span> dentro de una etiqueta identificada como “myDiv” y aplicar una regla a todos los enlaces que estén anidados en una etiqueta con el identificador “mySpan”.
Como ya sabes, la reutilización y la reducción de código son primordiales para asegurar un fácil mantenimiento del código.
Para aplicar el mismo estilo a diferentes reglas no es necesario repetir código, puedes separar las reglas por comas y especificar el estilo una sola vez.
En este ejemplo, se indica que los elementos con el identificador “myDiv” y “mySpan” se deben presentar con el color verde. Estas dos reglas se pueden agrupar en una sola.
Los dos selectores se separan con una coma.
Por supuesto, puedes agrupar reglas de cualquier tipo de selector.
AVISO IMPORTANTE
Este documento, su texto y gráficos e imágenes, puede ser utilizado bajo una licencia Creative Commons de tipo Atribución, No-Comercial. En caso de utilizarse este material o de la creación de un derivado, la atribución se debe respetar citando la fuente como “Actívate, Google España 2016” y expresamente, si es posible, mediante un enlace activo a
https://www.google.es/activate/. Revisado, enero 2016.
