{"id":14224,"date":"2013-03-12T11:00:48","date_gmt":"2013-03-12T18:00:48","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14224"},"modified":"2022-06-01T13:53:48","modified_gmt":"2022-06-01T20:53:48","slug":"last-of-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-of-type\/","title":{"rendered":":last-of-type"},"content":{"rendered":"<p>The <code>:last-of-type<\/code> selector allows you to target the last occurence of an element within its container. It is defined in the <a href=\"http:\/\/www.w3.org\/TR\/selectors\/\" rel=\"noopener\">CSS Selectors Level 3 spec<\/a> as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling content.<\/p>\n<p>Suppose we have an article with a title, several paragraphs and an image:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;article&gt;\n\n&lt;h1&gt;A Title&lt;\/h1&gt;\n\n  \nParagraph 1.\n  \nParagraph 2.\n  \nParagraph 3.\n  &lt;img src=\"...\"&gt;\n&lt;\/article&gt;<\/code><\/pre>\n<p>We want to make the last paragraph smaller, to act as a conclusion to the content (like an editor&#8217;s note). Instead of giving it a class, we can use <code>:last-of-type<\/code> to select it:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">p:last-of-type {\n  font-size: 0.75em;\n}<\/code><\/pre>\n<p>Using <code>:last-of-type<\/code> is very similar to <code>:nth-child<\/code> but with one <b>critical difference:<\/b> it is <a href=\"https:\/\/css-tricks.com\/the-difference-between-nth-child-and-nth-of-type\/\">less specific<\/a>. In the example above, if we had used <code>p:nth-last-child(1)<\/code>, nothing would happen because the paragraph is not the last child of its parent (the <code><\/code><\/p>\n<p><code><\/code><\/p>\n<article><code><\/code>). This reveals the power of <code>:last-of-type<\/code>: it targets a particular type of element in a particular arrangement <i>with relation to similar siblings, not all siblings<\/i>.<\/p>\n<p>The more complete example below demonstrates the use of <code>:last-of-type<\/code> and a related pseudo-class selector, <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\"><code>:first-of-type<\/code><\/a>.<\/p>\n<pre class=\"codepen\" data-height=\"430\" style=\"height: 430px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"fqJLB\" data-user=\"zakkain\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/zakkain\/pen\/fqJLB\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<h3 id=\"other-resources\">Other Resources<\/h3>\n<ul>\n<li>Related to: <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\">first-of-type<\/a>, <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-of-type\">nth-of-type<\/a>, <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\">nth-last-of-type<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/:last-of-type\" rel=\"noopener\">Mozilla Docs<\/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 class=\"yep\">Works<\/td>\n<td class=\"yep\">3.2+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">9.5+<\/td>\n<td class=\"yep\">9+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><code>:last-of-type<\/code> was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either <a href=\"https:\/\/css-tricks.com\/how-to-use-the-webshims-polyfill\/\">polyfill for IE<\/a>, or use these selectors in non-critical ways \u00e1 la progressive enhancement, which is recommended.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>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 article with a title, several [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14216,"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":14186,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\/","url_meta":{"origin":14224,"position":0},"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":14244,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-of-type\/","url_meta":{"origin":14224,"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":14242,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-child\/","url_meta":{"origin":14224,"position":2},"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":[]},{"id":14184,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-child\/","url_meta":{"origin":14224,"position":3},"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":14222,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-child\/","url_meta":{"origin":14224,"position":4},"title":":last-child","date":"September 6, 2011","format":false,"excerpt":"The :last-child selector allows you to target the last element directly inside its containing 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\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14085,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/orphans\/","url_meta":{"origin":14224,"position":5},"title":"orphans","date":"September 5, 2011","format":false,"excerpt":"In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphan property controls the minimum number of lines of a paragraph that can be left on the old page. This property only\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14224"}],"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=14224"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14224\/revisions"}],"predecessor-version":[{"id":366200,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14224\/revisions\/366200"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14216"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14224"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}