{"id":14234,"date":"2011-09-06T20:21:11","date_gmt":"2011-09-07T03:21:11","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14234"},"modified":"2021-11-05T13:00:02","modified_gmt":"2021-11-05T20:00:02","slug":"nth-of-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-of-type\/","title":{"rendered":":nth-of-type"},"content":{"rendered":"\n<p>The <code>:nth-of-type<\/code> selector allows you select one or more elements based on their source order, according to a formula. 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 elements.<\/p>\n\n\n\n<p>Suppose we have an unordered list and wish to \u201czebra-stripe\u201d alternating list items:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;ul>\n  &lt;li>First Item&lt;\/li>\n  &lt;li>Second Item&lt;\/li>\n  &lt;li>Third Item&lt;\/li>\n  &lt;li>Fourth Item&lt;\/li>\n  &lt;li>Fifth Item&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>Rather than adding classes to each list item (eg <code>.even<\/code> &amp; <code>.odd<\/code>) we can use <code>:nth-of-type<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n  background: slategrey;\n}\n\/* select alternating items starting with the second item *\/\nli:nth-of-type(2n) {\n  background: lightslategrey;\n}<\/code><\/pre>\n\n\n\n<p><code class=\"language-css\"><\/code>As you can see, <code>:nth-of-type<\/code> takes an argument: this can be a single integer, the keywords \u201ceven\u201d or \u201codd\u201d, or a formula as shown above. If an integer is specified only one element is selected\u2014but the keywords or a formula will iterate through all the children of the parent element and select matching elements\u2014similar to navigating items in an array in JavaScript. Keywords \u201ceven\u201d and \u201codd\u201d are straightforward, but the formula is constructed using the syntax <code>an+b<\/code>, where:<\/p>\n\n\n\n<ul><li>\u201ca\u201d is an integer value<\/li><li>\u201cn\u201d is the literal letter \u201cn\u201d<\/li><li>\u201c+\u201d is an operator and may be either \u201c+\u201d or \u201c-\u201d<\/li><li>\u201cb\u201d is an integer and is required if an operator is included in the formula<\/li><\/ul>\n\n\n\n<p>It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The \u201cn\u201d part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula <code>2n<\/code>, which worked because every time an element was checked, \u201cn\u201d increased by one (2\u00d70, 2\u00d71, 2\u00d72, 2\u00d73, etc). If an element&#8217;s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read <a href=\"https:\/\/css-tricks.com\/how-nth-child-works\/\">this article<\/a>.<\/p>\n\n\n\n<p>To illustrate further, here are some examples of valid <code>:nth-of-type<\/code> selectors:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Aqzip\" src=\"\/\/codepen.io\/anon\/embed\/Aqzip?height=450&amp;theme-id=1&amp;slug-hash=Aqzip&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Aqzip\" title=\"CodePen Embed Aqzip\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Luckily, you don&#8217;t always have to do the math yourself\u2014there are several <code>:nth-of-type<\/code> testers and generators out there:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/examples\/nth-child-tester\/#\">CSS-Tricks Tester<\/a><\/li><li><a href=\"http:\/\/lea.verou.me\/demos\/nth.html\" rel=\"noopener\">Lea Verou&#8217;s Tester<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"points-of-interest\">Points of Interest<\/h3>\n\n\n<ul><li><code>:nth-of-type<\/code> iterates through elements starting from the top of the source order. The only difference between it and <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\"><code>:nth-last-of-type<\/code><\/a> is that the latter iterates through elements <i>starting from the bottom of the source order<\/i>.<\/li><li>The <code>:nth-of-type<\/code> selector is very similar to <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\"><code>:nth-child<\/code><\/a> but with one <b>critical difference:<\/b> it is <a href=\"https:\/\/css-tricks.com\/the-difference-between-nth-child-and-nth-of-type\/\">more specific<\/a>. In our example above they would produce the same result because we are iterating over only <code>li<\/code> elements, but if we were iterating over a more complex group of siblings, <code>:nth-child<\/code> would try to match all siblings, not only siblings of the same element type. This reveals the power of <code>:nth-of-type<\/code>\u2014it targets a particular type of element in an arrangement <i>with relation to similar siblings, not all siblings<\/i>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related Properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\">nth-last-of-type<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\">nth-child<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-child\">nth-last-child<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-of-type\">first-of-type<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-of-type\">last-of-type<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-of-type\" rel=\"noopener\">Mozilla Docs<\/a><\/li><li><a href=\"http:\/\/quirksmode.org\/css\/selectors\/nthchild.html\" rel=\"noopener\">QuirksMode article<\/a><\/li><li><a href=\"http:\/\/reference.sitepoint.com\/css\/understandingnthchildexpressions\" rel=\"noopener\">Sitepoint article<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p class=\"ciu_embed\" data-feature=\"mdn-css__selectors__nth-of-type\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">\n  Data on support for the mdn-css__selectors__nth-of-type feature across the major browsers\n<\/p>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ireade\/caniuse-embed\/public\/caniuse-embed.min.js\"><\/script>\n\n\n\n<p><code>:nth-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","protected":false},"excerpt":{"rendered":"<p>The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. 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 elements. Suppose we have an unordered list [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14228,"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":14236,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-of-type\/","url_meta":{"origin":14234,"position":0},"title":":nth-last-of-type","date":"September 6, 2011","format":false,"excerpt":"The :nth-last-of-type selector allows you select one or more elements based on their source order, according to a formula. 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 elements. It\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194425,"url":"https:\/\/css-tricks.com\/snippets\/sass\/placing-items-circle\/","url_meta":{"origin":14234,"position":1},"title":"Placing Items on a Circle","date":"January 28, 2015","format":false,"excerpt":"It can be quite challenging to place items on a circle with CSS. Usually, we end up relying on JavaScript because some plugins do it all right away. However more often than not there is no good reason to do it in JavaScript rather than CSS. This is presentational purpose,\u2026","rel":"","context":"With 25 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14232,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-child\/","url_meta":{"origin":14234,"position":2},"title":":nth-last-child","date":"September 6, 2011","format":false,"excerpt":"The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. 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 elements. It\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14230,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\/","url_meta":{"origin":14234,"position":3},"title":":nth-child","date":"September 6, 2011","format":false,"excerpt":"The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. \/* Select the first list item *\/ li:nth-child(1) { } \/* Select the 5th list item *\/ li:nth-child(5) { } \/* Select every other list item starting with first *\/\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":14234,"position":4},"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":16950,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/remove-li-elements-from-output-of-wp_nav_menu\/","url_meta":{"origin":14234,"position":5},"title":"Remove LI Elements From Output of wp_nav_menu","date":"May 7, 2012","format":false,"excerpt":"You can remove or change the container that you get by default with wp_nav_menu (codex) through parameters, but you can't remove the elements that wrap each menu item. This is how you can actually remove them: $menuParameters = array( 'container' => false, 'echo' => false, 'items_wrap' => '%3$s', 'depth' =>\u2026","rel":"","context":"With 70 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14234"}],"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=14234"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14234\/revisions"}],"predecessor-version":[{"id":356203,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14234\/revisions\/356203"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14228"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14234"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}