{"id":641,"date":"2022-01-12T22:08:22","date_gmt":"2022-01-12T21:08:22","guid":{"rendered":"http:\/\/blogsaverroes.juntadeandalucia.es\/davidcervera\/?page_id=641"},"modified":"2022-02-18T11:11:24","modified_gmt":"2022-02-18T10:11:24","slug":"diferencias-entre-el-selector-class-y-el-selector-id","status":"publish","type":"page","link":"https:\/\/blogsaverroes.juntadeandalucia.es\/davidcervera\/html\/diferencias-entre-el-selector-class-y-el-selector-id\/","title":{"rendered":"Selectores CSS y diferencias entre el selector Class y el selector Id"},"content":{"rendered":"

La llegada de HTML5<\/strong><\/a>, ha sido acompa\u00f1ada por un conjunto de APIs de JavaScript<\/strong><\/a> muy \u00fatiles para resolver muchas situaciones del trabajo cotidiano de los desarrolladores Web. En este conjunto se encuentra Selectors API<\/a><\/strong> que ya ha sido estandarizada por el W3C y ya se encuentra en desarrollo el Nivel 2<\/a><\/strong>.<\/p>\n

Entre las ventajas que introduce esta API hay que destacar la posibilidad de utilizar selectores<\/em><\/strong>, tal como lo hacemos con CSS con los m\u00e9todos querySelector()<\/strong> y querySelectorAll()<\/strong>.<\/p>\n

Recordamos que son los selectores<\/span><\/strong><\/h2>\n

Los selectores CSS, que son las estructuras que nos permiten asignar las propiedades a los elementos HTML<\/strong>
\n<\/strong><\/p>\n

Partimos de este c\u00f3digo<\/p>\n

body { font-family: sans-serif; }<\/pre>\n
Las reglas CSS se componen principalmente de dos elementos: selectores y declaraciones<\/span>. En este caso, el selector ser\u00eda \u00abbody\u00bb y la declaraci\u00f3n \u00abfont-family: sans-serif\u00bb.
\n<\/span><\/span><\/p>\n
Tipos de Selectores CSS<\/span>
<\/strong><\/strong><\/p>\n
El selector universal (*)<\/strong> es aquel que sirve para apuntar a todos los elementos HTML del documento. Por ejemplo, podr\u00edamos crear una regla en la que se defina que el tama\u00f1o de fuente de todos los elementos HTML del documento sea de 12px:<\/p>\n
* {     font-size: 12px; }<\/pre>\n
Si est\u00e1s comenzando a aprender CSS, puede que este selector te parezca muy \u00fatil. Sin embargo, te recomiendo que lo utilices lo menos posible<\/strong>, ya que puede darte problemas a medida que aumentan tus l\u00edneas de c\u00f3digo CSS. En su lugar, es m\u00e1s adecuado que emplees selectores m\u00e1s espec\u00edficos.<\/p>\n
Selectores de etiqueta. <\/strong>Los selectores de etiqueta, tambi\u00e9n denominados selectores de tipo, son aquellos en los que se indica el nombre de la etiqueta HTML a la que se le asignar\u00e1 una propiedad CSS. Por ejemplo, podemos aplicar un tama\u00f1o de un 10px rem y un color azul a todos los encabezados h2 de nuestro documento empleando la siguiente regla:<\/span><\/p>\n
h2 { <\/span> font-size: 10px; <\/span>  color: blue;  <\/span>}<\/span><\/pre>\n
Selectores de ID y de CLASE.<\/strong> Como ya sabes, los elementos HTML pueden tener clases o identificadores, las cuales se definen dentro de las etiquetas HTML mediante las estructuras class=\u00bbnombre-clase\u00bb e id=\u00bbnombre-id\u00bb<\/strong>. La utilidad principal de las clases e identificadores es la de posibilitar la selecci\u00f3n de elementos concretos de HTML mediante CSS. Pongamos un ejemplo:<\/span><\/p>\n