Suppose we have the following HTML:<\/p>\n
\r\n&lt;div class=&quot;site-main&quot;&gt;\r\n &lt;article&gt;First article&lt;\/article&gt;\r\n &lt;article&gt;Second article&lt;\/article&gt;\r\n &lt;article&gt;Third article&lt;\/article&gt;\r\n &lt;article&gt;Fourth article&lt;\/article&gt;\r\n \r\n &lt;nav class=&quot;site-nav&quot;&gt;Previous ... Next&lt;\/nav&gt;\r\n&lt;\/div&gt;&lt;!-- .site-main --&gt;\r\n<\/pre>\nWe want to give the last
article<\/code> element a black border. So we write:<\/p>\n\r\n.site-main article:last-child {\r\n border: 5px solid black;\r\n}\r\n<\/pre>\nBut this does not work!
\n
\nWhile our intention<\/em> is to select the last article element, the:last-child<\/code> pseudo-selector will not do so in this case. Why? There is an additionalnav<\/code> element below all thearticle<\/code>, and this element truly is thelast-child<\/code> ofdiv.site-main<\/code>. In the case above, the expressionarticle:last-child<\/code> causes the browser’s rendering engine to grab the last child, which is anav<\/code>. Since this is not the correct element type, the browser does not apply the desired styles to it<\/a>.<\/p>\nUse last-of-type<\/h1>\n
If there was no
nav<\/code> element, then the lastarticle<\/code> would have been styled as intended. However, since we care to style the last child that is anarticle<\/code> element<\/em>, it is correct to use the:last-of-type<\/code> selector. Now our CSS works:<\/p>\n\r\n.site-main article:last-of-type {\r\n border: 5px solid black;\r\n}\r\n<\/pre>\nOther X-of-type pseudo-selectors<\/h1>\n
In addition to
last-of-type<\/code>, there are also:<\/p>\n\n
first-of-type<\/code> – selects the first element of its parent with the matching type<\/li>\nnth-of-type()<\/code> – selects the n<\/em>th<\/sup> child of its parent with the matching type<\/li>\n<\/ul>\nThese pseudo-selectors are extremely useful if you are trying to apply styles among a bunch of distinct elements<\/a>.<\/p>\n
But wait! There’s another caveat<\/h2>\n
Consider the following:<\/p>\n
\r\n&lt;div class=&quot;site-main&quot;&gt;\r\n &lt;section class=&quot;banner&quot;&gt;First section&lt;\/section&gt;\r\n &lt;section class=&quot;content&quot;&gt;Second section&lt;\/section&gt;\r\n &lt;section class=&quot;content&quot;&gt;Third section&lt;\/section&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n\r\nsection:first-of-type { \/* First section *\/ }\r\nsection.banner:first-of-type { \/* First section *\/ }\r\nsection.content:first-of-type { \/* No effect, why?? *\/ }\r\n<\/pre>\nTo understand why the last selector fails, we must understand what type<\/strong> means. The type<\/strong> in X-of-type<\/strong> refers only to the type of element (e.g. a
<p><\/code> or<div><\/code>), and not its attributes such as ID or classes. In the example above: The reason whysection.content:first-of-type<\/code> didn’t do anything is because the firstsection<\/code> element did not have classcontent<\/code>. The second line worked, but is overqualified<\/span>, i.e. the.banner<\/code> is completely redundant.<\/p>\nIn summary, when using
X-of-type<\/code> selectors, don’t attempt to introduce class, ID, or other attribute selectors into the mix. Doing so will only deceive you.<\/p>\nPutting it all together<\/h1>\n