{"id":2052,"date":"2016-10-24T15:33:53","date_gmt":"2016-10-24T15:33:53","guid":{"rendered":"http:\/\/cssreset.com\/?p=2052"},"modified":"2016-10-24T15:33:53","modified_gmt":"2016-10-24T15:33:53","slug":"how-to-hide-an-html-element-using-display-none","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-hide-an-html-element-using-display-none\/","title":{"rendered":"How to Hide an HTML Element Using Display: None"},"content":{"rendered":"

CSS3 has a handy little trick that allows you hide any HTML element by applying the display property. By setting display: none to any HTML element, the element will no longer appear on the viewport, and though the HTML will still appear in the source code, there will be no space left for where the element\u00a0should<\/em> appear. Using display: none will completely hide any element so that there’s no visible trace of it except for in the source code.<\/p>\n

Here’s how it works. Let’s say you want to hide a certain element with the class “.hideMe”:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. .hideMe{<\/span><\/div><\/li>\n
  2. display<\/span>:<\/span> none<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    That’s all it takes! Just be sure to not overuse the display: none property. In many circumstances it isn’t considered a CSS best practice, and it’s also not always appreciated by search engines like Google if it appears in your CSS too often — but it’s great to use sparingly and if you need to hide something in a pinch!<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    CSS3 has a handy little trick that allows you hide any HTML element by applying the display property. By setting display: none to any HTML element, the element will no longer appear on the viewport, and though the HTML will […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2052"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2052"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2052\/revisions"}],"predecessor-version":[{"id":2053,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2052\/revisions\/2053"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}