{"id":195116,"date":"2015-02-04T14:37:38","date_gmt":"2015-02-04T21:37:38","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=195116"},"modified":"2015-03-26T15:28:22","modified_gmt":"2015-03-26T22:28:22","slug":"blank","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/blank\/","title":{"rendered":":blank"},"content":{"rendered":"<p>The <code>:blank<\/code> pseudo-class builds upon the <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/\">:empty<\/a><\/code> pseudo-class. Like <code>:empty<\/code>, <code>:blank<\/code> will select elements that contain nothing at all, or contain only an HTML comment. But, <code>:blank<\/code> will also select elements that include whitespace, which <code>:empty<\/code> will not.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">p:blank {\r\n  display: none;\r\n}<\/code><\/pre>\n<p><code>p:blank<\/code> will select these paragraphs, just like <code>p:empty<\/code> would:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;p&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;!-- nothing but a comment--&gt;&lt;\/p&gt;<\/code><\/pre>\n<p>And it will also select these paragraphs, which <code>p:empty<\/code> would not:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;p&gt; &lt;\/p&gt;\r\n&lt;p&gt;\r\n\r\n  &lt;!--a comment and some whitespace--&gt;\r\n  \r\n&lt;\/p&gt;<\/code><\/pre>\n<p>At the time of this writing, <code>:blank<\/code> is part of the CSS Selectors Level 4 draft, and is not supported by any browser. Mozilla supports its own version of <code>:blank<\/code> under a different, vendor-prefixed name: <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:-moz-only-whitespace\" rel=\"noopener\">:-moz-only-whitespace<\/a><\/code>. The demo below includes Mozilla&#8217;s version, and will only work in Mozilla browsers for now.<\/p>\n<p data-height=\"268\" style=\"height: 268px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"39d05af77bc1ee92aa3224347f375362\" data-default-tab=\"result\" data-user=\"mariemosley\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/mariemosley\/pen\/39d05af77bc1ee92aa3224347f375362\/\" rel=\"noopener\">:blank and :-moz-only-whitespace<\/a> by mariemosley (<a href=\"http:\/\/codepen.io\/mariemosley\" rel=\"noopener\">@mariemosley<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/\">:empty<\/a><\/li>\n<\/ul>\n<h3>More Information<\/h3>\n<ul>\n<li><a href=\"http:\/\/dev.w3.org\/csswg\/selectors-4\/#the-blank-pseudo\" rel=\"noopener\">:blank in the Selectors Level 4 Draft<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:-moz-only-whitespace\" rel=\"noopener\">:-moz-only-whitespace at MDN<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"nope\">Nope<\/td>\n<td data-browser-name=\"Safari\" class=\"nope\">Nope<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep-nope\">As :-moz-only-whitespace<\/td>\n<td data-browser-name=\"Opera\" class=\"nope\">Nope<\/td>\n<td data-browser-name=\"IE\" class=\"nope\">Nope<\/td>\n<td data-browser-name=\"Android\" class=\"nope\">Nope<\/td>\n<td data-browser-name=\"iOS\" class=\"nope\">Nope<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. p:blank { display: none; } p:blank will select these paragraphs, just like p:empty would: &lt;p&gt;&lt;\/p&gt; &lt;p&gt;&lt;!&#8211; nothing [&hellip;]<\/p>\n","protected":false},"author":33562,"featured_media":0,"parent":14154,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14206,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/invalid\/","url_meta":{"origin":195116,"position":0},"title":":invalid","date":"September 6, 2011","format":false,"excerpt":"The :invalid selector allows you to select elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14285,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/valid\/","url_meta":{"origin":195116,"position":1},"title":":valid","date":"September 6, 2011","format":false,"excerpt":"The :valid selector allows you to select elements that contain valid content, as determined by its type attribute. :valid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This selector has\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339498,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/","url_meta":{"origin":195116,"position":2},"title":":empty","date":"April 27, 2021","format":false,"excerpt":"The CSS :empty pseudo-class selects any element that does not contain children for a given selector. \/* Changes the background color of every empty section element *\/ section:empty { background-color: tomato; } If we were to run that code on a page, the CSS would look for a <section> element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":344533,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/fullscreen\/","url_meta":{"origin":195116,"position":3},"title":":fullscreen","date":"July 14, 2021","format":false,"excerpt":"The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style elements when they\u2019re in that state and that\u2019s what :fullscreen\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/fullscreen.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":195116,"position":4},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":148811,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/06-jquery-selector-extensions\/","url_meta":{"origin":195116,"position":5},"title":"#06: jQuery Selector Extensions","date":"September 2, 2013","format":false,"excerpt":"jQuery can select anything that CSS3 can select. But it doesn't stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195116"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=195116"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195116\/revisions"}],"predecessor-version":[{"id":199070,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/195116\/revisions\/199070"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14154"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=195116"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=195116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}