{"id":715,"date":"2024-04-22T21:16:19","date_gmt":"2024-04-23T00:16:19","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=715"},"modified":"2025-11-07T11:20:56","modified_gmt":"2025-11-07T14:20:56","slug":"seletores-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/","title":{"rendered":"Seletores CSS"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Seletores CSS<\/strong>: Imagine o CSS como um pintor e o HTML como a tela. Para que o pintor saiba exatamente onde aplicar o azul ou a sombra, ele precisa de um <strong>endere\u00e7o preciso<\/strong>. No CSS, esse endere\u00e7o \u00e9 fornecido pelos <strong>Seletores<\/strong>.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Os Seletores CSS s\u00e3o padr\u00f5es que identificam os elementos HTML aos quais voc\u00ea deseja aplicar estilos. Dominar a sintaxe dos seletores \u00e9 a chave para escrever um CSS eficiente, organizado e livre de conflitos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos desvendar os principais tipos de seletores, a import\u00e2ncia da precis\u00e3o e como us\u00e1-los para transformar suas p\u00e1ginas web.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. Tipos Fundamentais de Seletores<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A regra de ouro no CSS \u00e9: <strong>Seletor { Propriedade: Valor; }<\/strong>. A efic\u00e1cia da regra depende do seu seletor.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Categoria<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><td><strong>Uso<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Elemento<\/strong> (Tag)<\/td><td><code>tag<\/code><\/td><td><code>p<\/code>, <code>h1<\/code>, <code>div<\/code><\/td><td>Seleciona <strong>todos<\/strong> os elementos daquele tipo.<\/td><\/tr><tr><td><strong>Classe<\/strong><\/td><td><code>.nome<\/code><\/td><td><code>.card-principal<\/code><\/td><td>Seleciona <strong>qualquer<\/strong> elemento com esse atributo <code>class<\/code>. <strong>(Mais Usado)<\/strong><\/td><\/tr><tr><td><strong>ID<\/strong><\/td><td><code>#nome<\/code><\/td><td><code>#cabecalho-topo<\/code><\/td><td>Seleciona o <strong>\u00fanico<\/strong> elemento com esse atributo <code>id<\/code>.<\/td><\/tr><tr><td><strong>Universal<\/strong><\/td><td><code>*<\/code><\/td><td><code>*<\/code><\/td><td>Seleciona <strong>todos<\/strong> os elementos da p\u00e1gina. (Bom para resetar margens).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u26a0\ufe0f Classe vs. ID (A Regra de Ouro)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">No desenvolvimento moderno, <strong>priorize o uso de Seletores de Classe (<code>.<\/code>)<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Classes<\/strong> podem ser reutilizadas em quantos elementos voc\u00ea quiser.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>IDs<\/strong> devem ser usados com modera\u00e7\u00e3o (apenas para \u00e2ncoras de link, ou como <em>ganchos<\/em> para JavaScript), pois s\u00e3o dif\u00edceis de sobrescrever (alta especificidade).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. Seletores de Rela\u00e7\u00e3o (Combinadores)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Esses seletores baseiam-se na rela\u00e7\u00e3o de parentesco ou vizinhan\u00e7a entre elementos.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Combinador<\/strong><\/td><td><strong>S\u00edmbolo<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><td><strong>Significado<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Descendente<\/strong><\/td><td><code>espa\u00e7o<\/code><\/td><td><code>div p<\/code><\/td><td>Seleciona todos os <code>&lt;p&gt;<\/code> que est\u00e3o <strong>dentro<\/strong> de qualquer <code>&lt;div&gt;<\/code>.<\/td><\/tr><tr><td><strong>Filho Direto<\/strong><\/td><td><code>&gt;<\/code><\/td><td><code>ul &gt; li<\/code><\/td><td>Seleciona apenas os <code>&lt;li&gt;<\/code> que s\u00e3o filhos <strong>diretos<\/strong> de um <code>&lt;ul&gt;<\/code>.<\/td><\/tr><tr><td><strong>Irm\u00e3o Adjacente<\/strong><\/td><td><code>+<\/code><\/td><td><code>h2 + p<\/code><\/td><td>Seleciona o <strong>primeiro<\/strong> <code>&lt;p&gt;<\/code> que vier imediatamente <strong>ap\u00f3s<\/strong> um <code>&lt;h2&gt;<\/code> (mesmo n\u00edvel).<\/td><\/tr><tr><td><strong>Irm\u00e3os em Geral<\/strong><\/td><td><code>~<\/code><\/td><td><code>h2 ~ p<\/code><\/td><td>Seleciona <strong>todos<\/strong> os <code>&lt;p&gt;<\/code> que vierem ap\u00f3s um <code>&lt;h2&gt;<\/code> (mesmo n\u00edvel).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo de HTML para Teste:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"bloco\"&gt;\n  &lt;p&gt;1. Descendente&lt;\/p&gt;\n  &lt;span&gt;&lt;p&gt;2. Descendente Aninhado&lt;\/p&gt;&lt;\/span&gt;\n&lt;\/div&gt;\n&lt;p&gt;3. Fora do Bloco&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. Pseudo-Classes e Pseudo-Elementos (Interatividade e Posi\u00e7\u00e3o)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Estes s\u00e3o cruciais para estilizar elementos com base em seu <strong>estado<\/strong> ou em sua <strong>posi\u00e7\u00e3o<\/strong> na \u00e1rvore de elementos.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. Pseudo-Classes (<code>:<\/code>)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Definem o estilo com base em um estado ou condi\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Pseudo-Classe<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>:hover<\/code><\/strong><\/td><td><code>a:hover<\/code><\/td><td>Estilo aplicado quando o mouse est\u00e1 sobre o elemento. (Interatividade).<\/td><\/tr><tr><td><strong><code>:nth-child(n)<\/code><\/strong><\/td><td><code>li:nth-child(2)<\/code><\/td><td>Seleciona o segundo item dentro de seu elemento pai. (Posi\u00e7\u00e3o).<\/td><\/tr><tr><td><strong><code>:first-child<\/code><\/strong><\/td><td><code>p:first-child<\/code><\/td><td>Seleciona o primeiro elemento filho do seu tipo.<\/td><\/tr><tr><td><strong><code>:focus<\/code><\/strong><\/td><td><code>input:focus<\/code><\/td><td>Estilo aplicado quando o elemento est\u00e1 em foco (importante para acessibilidade).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Pseudo-Elementos (<code>::<\/code>)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Estiliza partes espec\u00edficas de um elemento.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Pseudo-Elemento<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>::before<\/code><\/strong><\/td><td><code>p::before<\/code><\/td><td>Cria conte\u00fado <strong>antes<\/strong> do conte\u00fado real do elemento.<\/td><\/tr><tr><td><strong><code>::after<\/code><\/strong><\/td><td><code>p::after<\/code><\/td><td>Cria conte\u00fado <strong>ap\u00f3s<\/strong> o conte\u00fado real do elemento.<\/td><\/tr><tr><td><strong><code>::first-letter<\/code><\/strong><\/td><td><code>p::first-letter<\/code><\/td><td>Estiliza apenas a primeira letra de um bloco de texto.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">4. O Conceito Fundamental: Especificidade<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Quando m\u00faltiplas regras CSS apontam para o mesmo elemento, o navegador usa a <strong>Especificidade<\/strong> para decidir qual estilo aplicar. A especificidade \u00e9 como um sistema de pontua\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A ordem de for\u00e7a (do mais fraco para o mais forte):<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Seletores de Elemento e Pseudo-Elementos.<\/strong> (Baixa for\u00e7a)<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Seletores de Classe, Atributo e Pseudo-Classes.<\/strong><\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Seletores de ID.<\/strong> (For\u00e7a alta, dif\u00edcil de sobrescrever)<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Estilos Inline.<\/strong> (For\u00e7a m\u00e1xima)<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Dica:<\/strong> Um estilo de Classe (<code>.minha-classe<\/code>) <strong>sempre<\/strong> tem mais peso do que um estilo de Elemento (<code>p<\/code>), independentemente da ordem em que foram escritos.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Seletores CSS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Os Seletores CSS s\u00e3o o idioma da estiliza\u00e7\u00e3o. Ao dominar os seletores b\u00e1sicos (<code>.<\/code> e <code>tag<\/code>), os combinadores de rela\u00e7\u00e3o (<code>&gt;<\/code>, <code>+<\/code>) e as Pseudo-Classes (<code>:hover<\/code>, <code>:nth-child<\/code>), voc\u00ea ganha a capacidade de mirar com precis\u00e3o cir\u00fargica qualquer parte do seu HTML, criando designs complexos, eficientes e interativos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Seletores CSS: Imagine o CSS como um pintor e o HTML como a tela. Para&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Seletores CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seletores CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-23T00:16:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T14:20:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Seletores CSS\",\"datePublished\":\"2024-04-23T00:16:19+00:00\",\"dateModified\":\"2025-11-07T14:20:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/\"},\"wordCount\":631,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/\",\"name\":\"Seletores CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-23T00:16:19+00:00\",\"dateModified\":\"2025-11-07T14:20:56+00:00\",\"description\":\"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/seletores-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seletores CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Seletores CSS - BLOG THIAGO ROSSI","description":"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...","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:\/\/thiagorossi.com.br\/blog\/seletores-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Seletores CSS - BLOG THIAGO ROSSI","og_description":"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...","og_url":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-23T00:16:19+00:00","article_modified_time":"2025-11-07T14:20:56+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Seletores CSS","datePublished":"2024-04-23T00:16:19+00:00","dateModified":"2025-11-07T14:20:56+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/"},"wordCount":631,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/","name":"Seletores CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-23T00:16:19+00:00","dateModified":"2025-11-07T14:20:56+00:00","description":"Seletores CSS: Neste artigo, vamos desvendar o mundo dos seletores CSS e entender como eles funcionam para transformar suas p\u00e1ginas web em...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/seletores-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/seletores-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Seletores CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":4384,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions\/4384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}