{"id":14279,"date":"2011-09-06T20:34:31","date_gmt":"2011-09-07T03:34:31","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14279"},"modified":"2013-03-25T13:31:07","modified_gmt":"2013-03-25T20:31:07","slug":"universal","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/u\/universal\/","title":{"rendered":"Universal"},"content":{"rendered":"<p>The <code>Universal Selector<\/code> is the * in CSS. Literally the asterisk character. It is essentially a <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/t\/type\/\">type selector<\/a> that matches any type. Type meaning an HTML tag like <code>&lt;div&gt;<\/code>, <code>&lt;body&gt;<\/code>, <code>&lt;button&gt;<\/code>, or literally any of the others.<\/p>\n<p>A common use is in the universal reset, like this:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">* {\r\n  margin: 0;\r\n  padding: 0;\r\n}<\/code><\/pre>\n<p>There are times when using the universal selector is implied. For instance:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">*.module {  }<\/code><\/pre>\n<p>is exactly the same as:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {  }<\/code><\/pre>\n<p>And in fact, the <a href=\"https:\/\/css-tricks.com\/specifics-on-css-specificity\/\">specificity<\/a> of those is exactly the same, as the universal selector hold no specificity value at all.<\/p>\n<p>The universal selector also is used with &#8220;universal namespaces&#8221;. It&#8217;s a bit weird, so I&#8217;ll just let <a href=\"http:\/\/www.w3.org\/Style\/CSS\/Test\/CSS3\/Selectors\/current\/xml\/full\/tng\/css3-modsel-92.html\" rel=\"noopener\">this simple demo<\/a> speak for itself.<\/p>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-selectors\/#universal-selector\" rel=\"noopener\">W3C spec<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/things-it-might-be-funuseful-to-try-the-universal-selector-on\/\">Fun\/Useful ways to use the Universal Selector<\/a><\/p>\n<\/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 class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like &lt;div&gt;, &lt;body&gt;, &lt;button&gt;, or literally any of the others. A common use is in the universal reset, like this: * { margin: 0; padding: 0; } There [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14277,"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":336866,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/w\/where\/","url_meta":{"origin":14279,"position":0},"title":":where","date":"March 23, 2021","format":false,"excerpt":"The :where() pseudo selector in CSS is functionally identical to the :is() psuedo selector in that it takes a comma-separated list of selectors to match against, except that where :is() takes the most specific among them as the specificity of that whole part, the specificity of :where() is always zero\u2026","rel":"","context":"In \":where\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14170,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/descendant\/","url_meta":{"origin":14279,"position":1},"title":"Descendant","date":"September 6, 2011","format":false,"excerpt":"A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here's some examples: ul li { } header h2 { } footer a { } .module div { } #info-toggle span { } div dl dt a { } Take ul li {\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":14279,"position":2},"title":":not","date":"September 6, 2011","format":false,"excerpt":"The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors. The ability to use a\u2026","rel":"","context":"In \":not\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/not-slide.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14273,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/t\/type\/","url_meta":{"origin":14279,"position":3},"title":"Type","date":"September 6, 2011","format":false,"excerpt":"A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as , , and tags. Type selectors are generally used to make \"broad stroke\" changes to the style of a site. p { \/* \"p\" is the type selector *\/\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":14279,"position":4},"title":"::file-selector-button","date":"August 30, 2022","format":false,"excerpt":"The ::file-selector-button in CSS is a pseudo-element that selects <input type=\"file\"> in HTML. input::file-selector-button { background-color: #f8a100; } You've undoubtedly come across file upload inputs \u2014 they're very common, especially for including file attachments in a form, like a PDF or image. CodePen Embed Fallback Syntax selector::file-selector-button { } You\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":263984,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/is\/","url_meta":{"origin":14279,"position":5},"title":":is","date":"December 21, 2017","format":false,"excerpt":"The pseudo-select :is() in CSS allows you to write compound selectors more tersely. For example, rather than writing: ul li, ol li {} We could write: :is(ul, ol) li {} This can make quick work of otherwise extremely verbose, complex, and error prone selectors. See: :is(section, article, aside, nav) :is(h1,\u2026","rel":"","context":"In \":is\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14279"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14279"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14279\/revisions"}],"predecessor-version":[{"id":20766,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14279\/revisions\/20766"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14277"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14279"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}