Selectores CSS y diferencias entre el selector Class y el selector Id
La llegada de HTML5, ha sido acompañada por un conjunto de APIs de JavaScript muy útiles para resolver muchas situaciones del trabajo cotidiano de los desarrolladores Web. En este conjunto se encuentra Selectors API que ya ha sido estandarizada por el W3C y ya se encuentra en desarrollo el Nivel 2.
Entre las ventajas que introduce esta API hay que destacar la posibilidad de utilizar selectores, tal como lo hacemos con CSS con los métodos querySelector() y querySelectorAll().
Recordamos que son los selectores
Los selectores CSS, que son las estructuras que nos permiten asignar las propiedades a los elementos HTML
Partimos de este código
body { font-family: sans-serif; }
Las reglas CSS se componen principalmente de dos elementos: selectores y declaraciones. En este caso, el selector sería «body» y la declaración «font-family: sans-serif».
Tipos de Selectores CSS
El selector universal (*) es aquel que sirve para apuntar a todos los elementos HTML del documento. Por ejemplo, podríamos crear una regla en la que se defina que el tamaño de fuente de todos los elementos HTML del documento sea de 12px:
* { font-size: 12px; }
Si estás comenzando a aprender CSS, puede que este selector te parezca muy útil. Sin embargo, te recomiendo que lo utilices lo menos posible, ya que puede darte problemas a medida que aumentan tus líneas de código CSS. En su lugar, es más adecuado que emplees selectores más específicos.
Selectores de etiqueta. Los selectores de etiqueta, también denominados selectores de tipo, son aquellos en los que se indica el nombre de la etiqueta HTML a la que se le asignará una propiedad CSS. Por ejemplo, podemos aplicar un tamaño de un 10px rem y un color azul a todos los encabezados h2 de nuestro documento empleando la siguiente regla:
h2 { font-size: 10px; color: blue; }
Selectores de ID y de CLASE. Como ya sabes, los elementos HTML pueden tener clases o identificadores, las cuales se definen dentro de las etiquetas HTML mediante las estructuras class=»nombre-clase» e id=»nombre-id». La utilidad principal de las clases e identificadores es la de posibilitar la selección de elementos concretos de HTML mediante CSS. Pongamos un ejemplo:
En el anterior ejemplo, hemos asignado a todos los párrafos la clase mi-parrafo. A continuación, hemos definido mediante CSS que todos los elementos HTML que tengan esta clase tendrán un tamaño de 1 rem y un tipo de letra Times New Roman. Como se puede observar, el selector de clase se establece con la nomenclatura .nombre-clase, es decir, poniendo un punto y a continuación el nombre de la clase.
Por otro lado, hemos asignado a cada uno de los párrafos un identificador. De esta manera, hemos indicado mediante CSS que el color de fuente del primer párrafo será negro, el del segundo verde y el del tercero azul. En este caso, el selector de id se establece con la sintaxis #nombre-id, es decir, poniendo una almohadilla y a continuación el nombre del identificador.
Diferencias entre el Selector de «id» y «class»
En el presente tutorial hablaremos sobre las diferencias entre el selector de Id y el selector de Clase y cuando debemos usar cada uno de estos correctamente.
Cuando nos iniciamos en la maquetación de sitios web, nos topamos con una duda que seguramente le ha pasado a más de uno, ¿Debemos usar el selector de “id” o el selector de «class» para brindar estilos a nuestros elementos y qué diferencia existe entre estos dos selectores? En este post te ayudaremos a entender cuándo y por qué utilizar uno u otro, para ello es importante tener clara la definición de ambos.
El valor del atributo “id” de un elemento es único; es decir, no debería haber otro elemento con el mismo nombre de identificador (id) dentro de tu documento HTML. Para declarar un selector de «id» lo podemos hacer de la siguiente manera.
Dentro de los selectores que tenemos en CSS (por tipo, por clase y por id), cada uno tiene un determinado peso, siendo el Selector de Id el que tiene más peso (1-0-0), seguido del selector de Clase (0-1-0) y finalmente el selector de tipo (0-0-1). Para que quede más claro lo anterior, si tenemos una etiqueta con un id = “rojo” y una class = “azul” a esta etiqueta se le aplicarán las propiedades establecidas a #rojo {} porque tiene un peso mayor.¿Es posible tener más de un elemento con el mismo identificador de Id?, ¿las propiedades sí se aplican?
Como vemos en el ejemplo, las propiedades sí se aplican, pero semánticamente esto no es correcto y no se debería usar de esa manera, ya que un elemento HTML debería tener un único valor del atributo «id» no repetible en otros elementos. Por otra parte, el valor del atributo “class”, a diferencia del valor del atributo “id”, puede ser utilizado en más de un elemento de tu documento HTML, esto nos es muy beneficioso cuando tenemos que aplicar los mismos estilos a diferentes elementos, dado que nos permite reducir las líneas de código en nuestro archivo .css, considerándose una buena práctica. Podemos utilizar un selector de clase de la siguiente manera:
Entonces si queremos aplicar las propiedades de un selector de clase a varios elementos, podemos hacerlo de la siguiente manera:
En el ejemplo estamos creamos el selector de clase “pkmn”, el cual contiene propiedades generales que aplicamos a todos los elementos; luego, dejando un espacio agregamos otro selector de clase donde establecemos un determinado color para cada elemento, de esta forma modificamos el color de cada elemento sin tener que escribir todo el código para cada una. Ahora que ya conocemos las características de los atributos «id» y «class» podremos elegir mejor si trabajar con uno u otro, dependiendo de la necesidad que tengamos.
BIBLIOGRAFÍA
Texto y ejemplos extraídos de devcode.ia