{"id":5554,"date":"2021-07-06T13:00:00","date_gmt":"2021-07-06T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=5554"},"modified":"2023-10-30T10:51:20","modified_gmt":"2023-10-30T09:51:20","slug":"que-son-los-selectores-css-y-que-tipos-existen","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/","title":{"rendered":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen"},"content":{"rendered":"\n

Si est\u00e1s aprendiendo desarrollo web, una de las lecciones m\u00e1s importantes que debes aprender es qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen<\/strong>, ya que esto te permitir\u00e1 dar estilo a los documentos HTML y establecer su disposici\u00f3n en pantalla. <\/p>\n\n\n\n

\u00a1Empecemos!<\/p>\n\n\n\n

Introducci\u00f3n: \u00bfqu\u00e9 son HTML y CSS?<\/h2>\n\n\n\n
\n
\n

Antes de empezar con los selectores, conviene que tengas claros algunos conceptos. En primer lugar, HTML es el lenguaje mediante el cual se construyen las p\u00e1ginas web<\/strong>. Gracias a \u00e9l, podr\u00e1s crear documentos con extensi\u00f3n .html que podr\u00e1n ser visualizados por un navegador web. HTML se compone de etiquetas con las que el programador define el contenido que tendr\u00e1 la web. Si todav\u00eda no conoces este lenguaje, te recomiendo que antes de seguir con este art\u00edculo, conozcas la estructura b\u00e1sica de HTML<\/a> y el listado de etiquetas HTML<\/a> existentes. <\/p>\n\n\n\n

En segundo lugar, debes saber que CSS es el lenguaje con el que se define el estilo y el aspecto visual de cualquier p\u00e1gina web<\/strong>. Mediante CSS podemos establecer colores, tipograf\u00edas, tama\u00f1os, espacios, la ubicaci\u00f3n de los elementos en la web, etc. Para ello, CSS emplea lo que se conocen como reglas<\/strong>. <\/p>\n\n\n\n

Las reglas CSS son fragmentos de c\u00f3digo en los que se asignan unas propiedades de estilo a uno o varios elementos HTML definidos por el programador. En este art\u00edculo no vamos a centrarnos en las propiedades de estilo que podemos aplicar, sino en los selectores CSS, que son las estructuras que nos permiten asignar las propiedades a los elementos HTML<\/strong>. A continuaci\u00f3n te explico estas cuestiones con mayor profundidad. <\/p>\n<\/div>\n\n\n\n

\n
\"Qu\u00e9<\/figure>\n<\/div>\n<\/div>\n\n\n\n

\u00bfQu\u00e9 son los selectores en CSS?<\/h2>\n\n\n\n
\n
\n
\"Qu\u00e9<\/figure>\n<\/div>\n\n\n\n
\n

Como te he mencionado previamente, CSS es un lenguaje que se compone de estructuras de programaci\u00f3n que se denominan reglas CSS<\/strong>. Un ejemplo de regla CSS podr\u00eda ser el siguiente, mediante la cual definimos que la tipograf\u00eda del elemento <body> del documento HTML ser\u00e1 Sans Serif. <\/p>\n\n\n\n

body {\n     font-family: sans-serif;\n}<\/code><\/pre>\n\n\n\n
Las reglas se componen principalmente de dos elementos: selectores y declaraciones<\/strong>. En este caso, el selector ser\u00eda \u00abbody\u00bb y la declaraci\u00f3n \u00abfont-family: sans-serif\u00bb. <\/p>\n\n\n\n
A continuaci\u00f3n te explico los tipos principales de selectores CSS que existen<\/strong>. Gracias a ellos podr\u00e1s comenzar a dar estilo a tus p\u00e1ginas web. <\/p>\n<\/div>\n<\/div>\n\n\n\n
Tipos de Selectores CSS<\/h2>\n\n\n\n
Selector universal *<\/h3>\n\n\n\n
El selector universal (*) es aquel que sirve para apuntar a todos los elementos HTML del documento<\/strong>. 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\n\n\n
* {\n     font-size: 12px;\n}<\/code><\/pre>\n\n\n\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\n\n\n
Selectores de etiqueta<\/h3>\n\n\n\n
\n
\n
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<\/strong>. Por ejemplo, podemos aplicar un tama\u00f1o de un 1 rem y un color azul a todos los encabezados h2 de nuestro documento empleando la siguiente regla: <\/p>\n\n\n\n
h2 {\n     font-size: 1rem;\n     color: blue; \n}<\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"Selectores<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Selectores de ID y de clase<\/h3>\n\n\n\n
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<\/em> e id=\u00bbnombre-id\u00bb<\/em>. 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:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <style>\n        .mi-parrafo {\n            font-size: 1rem;\n            font-family: 'Times New Roman', Times, serif;\n        }\n        #parrafo-1 {\n            color: black;\n        }\n        #parrafo-2 {\n            color: green;\n        }\n        #parrafo-3 {\n            color: yellow;\n        }\n    <\/style>\n<\/head>\n<body>\n    <p id=\"parrafo-1\" class=\"mi-parrafo\"><\/p>\n    <p id=\"parrafo-2\" class=\"mi-parrafo\"><\/p>\n    <p id=\"parrafo-3\" class=\"mi-parrafo\"><\/p>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
En el anterior ejemplo, hemos asignado a todos los p\u00e1rrafos la clase mi-parrafo. A continuaci\u00f3n, hemos definido mediante CSS que todos los elementos HTML que tengan esta clase tendr\u00e1n un tama\u00f1o 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\u00f3n el nombre de la clase<\/strong>. <\/p>\n\n\n\n
Por otro lado, hemos asignado a cada uno de los p\u00e1rrafos un identificador. De esta manera, hemos indicado mediante CSS que el color de fuente del primer p\u00e1rrafo ser\u00e1 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\u00f3n el nombre del identificador<\/strong>.<\/p>\n\n\n\n
Selector de Atributo <\/h3>\n\n\n\n
Este tipo de selectores permiten apuntar a elementos HTML que contengan un determinado atributo<\/strong>. Se definen, como m\u00ednimo, definiendo entre corchetes el nombre del atributo al que queremos se\u00f1alar, con la nomenclatura [nombre-atributo]<\/em>. Pongamos un ejemplo: <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <style>\n        [href]{\n            text-decoration: none;\n            color: orange;\n        }\n    <\/style>\n<\/head>\n<body>\n    <a href=\"https:\/\/carontestudio.com\/\">Enlace 1<\/a>\n    <a href=\"https:\/\/carontestudio.com\/blog\/\">Enlace 2<\/a>\n    <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\">Enlace 3<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
En el ejemplo anterior, hemos establecido que todos los elementos con el atributo \u00abhref\u00bb tengan un color naranja y no tengan una decoraci\u00f3n predefinida. De esta manera, los tres enlaces que hemos definido adoptar\u00edan dichos estilos, ya que todos ellos tienen el atributo href. <\/p>\n\n\n\n
Si quieres aprender m\u00e1s sobre este tipo de atributos, te recomendamos visitar la siguiente p\u00e1gina<\/a>. Por otro lado, si quieres conocer todos los atributos existentes en HTML<\/a>, te recomendamos nuestro art\u00edculo sobre dicha tem\u00e1tica.<\/p>\n\n\n\n
\u00bfEsto es todo?<\/h2>\n\n\n\n
\n
\n
\"Como<\/figure>\n<\/div>\n\n\n\n
\n
Hasta ahora hemos visto qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen. Sin embargo, por fortuna esto no es todo<\/strong>. Si est\u00e1s comenzando a programar en CSS, este tipo de selectores son m\u00e1s que suficientes para empezar a practicar. <\/p>\n\n\n\n
Una vez los tengas controlados, podr\u00e1s avanzar en la tem\u00e1tica y emplear selectores m\u00e1s complejos y apuntar a elementos HTML que sean hijos o hermanos de otros, crear selectores compuestos, combinar diferentes tipos de selectores, etc. <\/p>\n\n\n\n
Estate atento, porque pr\u00f3ximamente publicaremos nuevo contenido m\u00e1s avanzado sobre la tem\u00e1tica. <\/p>\n<\/div>\n<\/div>\n\n\n\n
Conclusiones<\/h2>\n\n\n\n
Los selectores CSS son la base para construir reglas de estilo que definan la est\u00e9tica y disposici\u00f3n de los elementos de una web. Como hemos visto, los selectores CSS principales son el universal, los de etiquetas, clases, identificadores y atributos<\/strong>. Gracias a ellos ya puedes comenzar a crear tus primeras reglas CSS. <\/p>\n\n\n\n
Te animo a practicar y a descubrir nuestra secci\u00f3n de art\u00edculos sobre programaci\u00f3n web<\/a>, donde podr\u00e1s encontrar una gran cantidad de contenido que ser\u00e1 \u00fatil en tu aprendizaje. <\/p>\n\n\n\n
\u00a1Saludos y hasta la pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"
Si est\u00e1s aprendiendo desarrollo web, una de las lecciones m\u00e1s importantes que debes aprender es qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen, ya que esto te permitir\u00e1 dar estilo a los documentos HTML y establecer su disposici\u00f3n en pantalla. <\/p>\n","protected":false},"author":21,"featured_media":5593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,50],"tags":[93],"class_list":["post-5554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion-web","tag-css"],"acf":[],"yoast_head":"\nQu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte<\/title>\n<meta name=\"description\" content=\"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte\" \/>\n<meta property=\"og:description\" content=\"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-06T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-30T09:51:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Caronte Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Caronte Studio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/\"},\"author\":{\"name\":\"Caronte Studio\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\"},\"headline\":\"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen\",\"datePublished\":\"2021-07-06T11:00:00+00:00\",\"dateModified\":\"2023-10-30T09:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/\"},\"wordCount\":1076,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/poster-selectores-css.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/\",\"name\":\"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/poster-selectores-css.jpg\",\"datePublished\":\"2021-07-06T11:00:00+00:00\",\"dateModified\":\"2023-10-30T09:51:20+00:00\",\"description\":\"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/poster-selectores-css.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/poster-selectores-css.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Tipos de selectores CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/que-son-los-selectores-css-y-que-tipos-existen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/af53223b68efd2be07f600dfc0506979\",\"name\":\"Caronte Studio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g\",\"caption\":\"Caronte Studio\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/caronte-studio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte","description":"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/","og_locale":"es_ES","og_type":"article","og_title":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte","og_description":"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.","og_url":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2021-07-06T11:00:00+00:00","article_modified_time":"2023-10-30T09:51:20+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg","type":"image\/jpeg"}],"author":"Caronte Studio","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Caronte Studio","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/"},"author":{"name":"Caronte Studio","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979"},"headline":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen","datePublished":"2021-07-06T11:00:00+00:00","dateModified":"2023-10-30T09:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/"},"wordCount":1076,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/","url":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/","name":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen - Blog dise\u00f1o web Caronte","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg","datePublished":"2021-07-06T11:00:00+00:00","dateModified":"2023-10-30T09:51:20+00:00","description":"\u00bfEst\u00e1s comenzando a aprender CSS? En este art\u00edculo te explicamos lo primero que debes aprender sobre este lenguaje, los selectores CSS.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/07\/poster-selectores-css.jpg","width":1250,"height":737,"caption":"Tipos de selectores CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/que-son-los-selectores-css-y-que-tipos-existen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Qu\u00e9 son los selectores CSS y qu\u00e9 tipos existen"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/af53223b68efd2be07f600dfc0506979","name":"Caronte Studio","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4156e97024f8a40a8bcef2b24c0de8c6cfdd6857e2bc92e993c1a04b255e2e98?s=96&d=mm&r=g","caption":"Caronte Studio"},"url":"https:\/\/carontestudio.com\/blog\/author\/caronte-studio\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/5554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=5554"}],"version-history":[{"count":35,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/5554\/revisions"}],"predecessor-version":[{"id":5595,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/5554\/revisions\/5595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/5593"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=5554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=5554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=5554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}