{"id":3305,"date":"2014-12-26T12:36:14","date_gmt":"2014-12-26T14:36:14","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3305"},"modified":"2014-12-26T16:34:57","modified_gmt":"2014-12-26T18:34:57","slug":"pseudo-class-empty-em-css","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css","title":{"rendered":"Pseudo-class :empty em CSS"},"content":{"rendered":"<p>O pouco conhecido pseudo-classe :empty  \u00e9 utilizado para <strong>selecionar os elementos vazios<\/strong>, elementos sem qualquer conte\u00fado ou elementos que contenham apenas coment\u00e1rios. \u00c9 \u00fatil para ocultar elementos vazios, por exemplo, que possam causar espa\u00e7amentos indesejados.<\/p>\n<p>Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da vers\u00e3o 9. Confira o <a href=\"http:\/\/caniuse.com\/#search=%3Aempty\" target=\"_blank\">suporte do pseudo-classe empty<\/a> para os principais navegadores.<\/p>\n<h2>Usando o pseudo-classe  : empty<\/h2>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;p&gt;&lt;\/p&gt;\r\n&lt;div&gt;&lt;\/div&gt;\r\n&lt;div&gt;&lt;!-- exemplo --&gt;&lt;\/div&gt;\r\n<\/pre>\n<pre class=\"brush: css; title: CSS; notranslate\" title=\"CSS\">\r\np:empty, div:empty {\r\n    background: red;\r\n     width:100px;\r\n    height:100px;\r\n    border:solid;\r\n}\r\n<\/pre>\n<p>No exemplo acima todos os elementos receber\u00e3o a estiliza\u00e7\u00e3o do CSS.<\/p>\n<p>Outro exemplo do uso do pseudo-classe  : empty <\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;div&gt;&lt;p&gt;&lt;\/p&gt;&lt;\/div&gt;\r\n&lt;div&gt;&lt;br\/&gt;&lt;\/div&gt;\r\n&lt;div&gt;Alg\u00fan texto.&lt;\/div&gt;\r\n<\/pre>\n<pre class=\"brush: css; title: CSS; notranslate\" title=\"CSS\">\r\ndiv:empty {\r\n   display: none;\r\n}\r\n<\/pre>\n<p>No exemplo acima nenhum elemento seria oculto (<em>display: none;<\/em>) j\u00e1 que todos possuem conte\u00fados, seja texto ou outros elementos HTML.<\/p>\n<p>Curta a p\u00e1gina do <a href=\"https:\/\/www.facebook.com\/pages\/Kadunew-Artigos-e-tutoriais-sobre-Web-Design\/787883281258323\" title=\"Artigos e tutoriais sobre Web Design\" target=\"_blank\">blog kadunew<\/a> no Facebook. Siga-me no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a> ou assine nosso <a href=\"https:\/\/www.kadunew.com\/blog\/feed\">Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O pouco conhecido pseudo-classe :empty \u00e9 utilizado para selecionar os elementos vazios, elementos sem qualquer conte\u00fado ou elementos que contenham apenas coment\u00e1rios. \u00c9 \u00fatil para ocultar elementos vazios, por exemplo, que possam causar espa\u00e7amentos indesejados. Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da vers\u00e3o 9. Confira o suporte do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-3305","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pseudo-class :empty em CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pseudo-class :empty em CSS\" \/>\n<meta property=\"og:description\" content=\"O pouco conhecido pseudo-classe :empty \u00e9 utilizado para selecionar os elementos vazios, elementos sem qualquer conte\u00fado ou elementos que contenham apenas coment\u00e1rios. \u00c9 \u00fatil para ocultar elementos vazios, por exemplo, que possam causar espa\u00e7amentos indesejados. Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da vers\u00e3o 9. Confira o suporte do [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-26T14:36:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-26T18:34:57+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css\",\"url\":\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css\",\"name\":\"Pseudo-class :empty em CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2014-12-26T14:36:14+00:00\",\"dateModified\":\"2014-12-26T18:34:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/css\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Pseudo-class :empty em CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pseudo-class :empty em 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:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css","og_locale":"pt_BR","og_type":"article","og_title":"Pseudo-class :empty em CSS","og_description":"O pouco conhecido pseudo-classe :empty \u00e9 utilizado para selecionar os elementos vazios, elementos sem qualquer conte\u00fado ou elementos que contenham apenas coment\u00e1rios. \u00c9 \u00fatil para ocultar elementos vazios, por exemplo, que possam causar espa\u00e7amentos indesejados. Esse pseudo-classe funciona na maioria dos navegadores. No Internet explorer funciona a partir da vers\u00e3o 9. Confira o suporte do [&hellip;]","og_url":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css","og_site_name":"KADUNEW","article_published_time":"2014-12-26T14:36:14+00:00","article_modified_time":"2014-12-26T18:34:57+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css","url":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css","name":"Pseudo-class :empty em CSS","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2014-12-26T14:36:14+00:00","dateModified":"2014-12-26T18:34:57+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/css\/pseudo-class-empty-em-css#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.kadunew.com\/blog\/category\/css"},{"@type":"ListItem","position":3,"name":"Pseudo-class :empty em CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3305"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3305"}],"version-history":[{"count":7,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3305\/revisions"}],"predecessor-version":[{"id":3311,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3305\/revisions\/3311"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}