{"id":371,"date":"2016-11-29T12:12:20","date_gmt":"2016-11-29T14:12:20","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=371"},"modified":"2016-11-29T14:06:32","modified_gmt":"2016-11-29T16:06:32","slug":"seletores-css-selecao-por-atributo","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/seletores-css-selecao-por-atributo\/","title":{"rendered":"Seletores CSS &#8211; Sele\u00e7\u00e3o por Atributo"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/11\/css-selecao-atributo.png\" alt=\"Seletores CSS - Sele\u00e7\u00e3o por Atributo\" \/>\n<p>\u00c9 bem simples selecionar um elemento pelo seu atributo com o CSS. Basta adicionar [atributo]. Exemplo: [href] vai selecionar todos os elementos que possu\u00edrem o atributo href na p\u00e1gina, (geralmente esses elementos s\u00e3o as tags a).<\/p>\n<p data-height=\"350\" data-theme-id=\"24256\" data-slug-hash=\"eb618afc0d20966124992c963952d92f\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" data-pen-title=\"eb618afc0d20966124992c963952d92f\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/eb618afc0d20966124992c963952d92f\/\">eb618afc0d20966124992c963952d92f<\/a> by Andre  Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Isso pode ser muito \u00fatil para selecionar elementos que possuem atributos que guardam valores e s\u00e3o manipulados via JavaScript. Como data-, voc\u00ea pode selecionar eles por exemplo com [data-nome].<\/p>\n<p>Voc\u00ea pode selecionar a tag e informar o atributo tamb\u00e9m, img[alt], vai selecionar todas as tags img com o atributo alt.<\/p>\n<pre><code class=\"language-css\">\nimg[alt] {\n display: block;\n}\n<\/code><\/pre>\n<p>Esse tipo de sele\u00e7\u00e3o come\u00e7a a ficar mais interessante quando buscamos tamb\u00e9m os valores dos atributos. \u00c9 muito simples: a[href=&#8221;#&#8221;] vai selecionar todas as tags a, que possuem como valor do atributo href o #.<\/p>\n<pre><code class=\"language-css\">\na[href=\"#\"] {\n color: green;\n}\n<\/code><\/pre>\n<p>Essa sele\u00e7\u00e3o pode ficar ainda mais interessante se usarmos alguns caracteres especiais antes do igual. Nessa postagem vamos falar o ^.<\/p>\n<p>Com o ^= voc\u00ea vai selecionar todos os elementos na p\u00e1gina com valores que comecem com o que estiver entre aspas.<\/p>\n<p>Exemplo: a[href^=&#8221;#&#8221;] vai seleciona todas as tags a com valores de href que comecem com #. Isso \u00e9 muito \u00fatil quando voc\u00ea deseja por exemplo selecionar apenas os links internos de um p\u00e1gina. Geralmente links internos possuem como valor de href=&#8221;#iddotarget&#8221; e esse tipo de sele\u00e7\u00e3o ir\u00e1 selecionar todos eles.<\/p>\n<pre><code class=\"language-css\">\na[href=^\"#\"] {\n color: pink;\n}\n<\/code><\/pre>\n<p>Outro exemplo seria uma sele\u00e7\u00e3o de todos os links seguros da p\u00e1gina. a[href^=&#8221;https&#8221;], vai selecionar apenas aqueles que estiverem linkando para p\u00e1ginas com o protocolo https.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c9 bem simples selecionar um elemento pelo seu atributo com o CSS. Basta adicionar [atributo]. Exemplo: [href] vai selecionar todos os elementos que possu\u00edrem o atributo href na p\u00e1gina, (geralmente esses elementos s\u00e3o as tags a). See the Pen eb618afc0d20966124992c963952d92f by Andre Origamid (@origamid) on CodePen. Isso pode ser muito \u00fatil para selecionar elementos que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/371"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":12,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/371\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/371\/revisions\/384"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}