{"id":14273,"date":"2011-09-06T20:32:52","date_gmt":"2011-09-07T03:32:52","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14273"},"modified":"2014-03-07T14:12:07","modified_gmt":"2014-03-07T21:12:07","slug":"type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/t\/type\/","title":{"rendered":"Type"},"content":{"rendered":"
A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as Often times Type Selectors are set as defaults, such as in a CSS reset where the intention is to override the browser defaults. An example from the first line of normalize.css<\/a>, a popular CSS reset:<\/p>\n The Type Selectors above are setting the display property of those tags to block, so that any time any of those tags are used throughout the site they will display as block unless overwritten by a more specific style.<\/p>\n It is generally considered poor practice to apply fine detail changes with a Type Selector alone. For example, applying a “color: white” property blanketly to all However, with a Type Selector such as Type Selectors are on the lowest level of the specificity cascade<\/a> (generally written as 0, 0, 0, 1), meaning that almost anything will override the style applied via a Type Selector alone, and adding a Type Selector to a class or ID in your CSS provides minimal extra specificity.<\/p>\n Type Selectors also rank lower on the CSS efficiency scale<\/a> than do classes and IDs. Therefore it is technically better performance choice to utilize a class or an ID rather than the more generic Type Selector (although the real speed difference is typically negligible). <\/p>\n A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as <p>, <span>, and <div> tags. Type selectors are generally used to make “broad stroke” changes to the style of a site. p { \/* “p” is the type selector *\/ margin: 0 0 1em […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14271,"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":14279,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/u\/universal\/","url_meta":{"origin":14273,"position":0},"title":"Universal","date":"September 6, 2011","format":false,"excerpt":"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 , , , or literally any of the others. A common use is in the universal reset, like this: * { margin:\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14244,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-of-type\/","url_meta":{"origin":14273,"position":1},"title":":only-of-type","date":"September 6, 2011","format":false,"excerpt":"The :only-of-type pseudo-class selector in CSS represents any element that has no siblings of the given type. p:only-of-type { color: red; } If no tag precedes the selector, it will match any tag (e.g. :only-of-type). If another selector precedes it, it will matched based on the type of tag that\u2026","rel":"","context":"In \":only-of-type\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14186,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\/","url_meta":{"origin":14273,"position":2},"title":":first-of-type","date":"March 12, 2013","format":false,"excerpt":"The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we\u2026","rel":"","context":"In \"first-of-type\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14224,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-of-type\/","url_meta":{"origin":14273,"position":3},"title":":last-of-type","date":"March 12, 2013","format":false,"excerpt":"The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14184,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-child\/","url_meta":{"origin":14273,"position":4},"title":":first-child","date":"September 6, 2011","format":false,"excerpt":"The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content. Suppose we have an article and\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14242,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-child\/","url_meta":{"origin":14273,"position":5},"title":":only-child","date":"September 6, 2011","format":false,"excerpt":"The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has no other element children. This would be the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. div p:only-child { color: red; } For example, if we nest paragraphs\u2026","rel":"","context":"In \":only-child\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14273"}],"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=14273"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14273\/revisions"}],"predecessor-version":[{"id":165025,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14273\/revisions\/165025"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14271"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14273"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<p>,<\/code>
<span><\/code>, and
<div><\/code> tags. Type selectors are generally used to make “broad stroke” changes to the style of a site.<\/p>\n
p { \/* \"p\" is the type selector *\/\r\n margin: 0 0 1em 0;\r\n}<\/code><\/pre>\n
Common Usage<\/h3>\n
article, aside, details, figcaption, figure, footer, header, \r\nmain, nav, section, summary {\r\n display: block;\r\n}<\/code><\/pre>\n
Best Practices<\/h3>\n
<div><\/code> tags would rarely be something of use on any site. This is because
<div><\/code> tags are generic and are used throughout sites for various purposes.<\/p>\n
body { }<\/code>, setting a default
font-size <\/code>and
line-height<\/code> is common. This is due in part to the fact that there can only be one
<body><\/code> tag on any given page, so there are fewer opportunities for conflicts.<\/p>\n
Type Selector Specifity and Performance<\/h3>\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"