You can find these instructions at . --- Create new folders: `js` & `includes`. Create new file in `includes`: `footer.html`. Cut `` from `index.html` & paste into `footer.html` & save it. Create new file in `js`: `include.js`. Copy code from into `include.js` & save it. Where `` used to go, enter this instead: ```html ``` Enter `` in `` (or at least above where you call the `includeHTML` function). Live Preview! Now find & replace `` with the ` ``` Add an ID of `header` onto the ` ``` Add this CSS: ```css .breadcrumb li:not(:last-child)::after { content: "\00A0➤\00A0"; } ``` In short, `li:not(:last-child)::after` tells the rendering engine to insert `\00A0➤\00A0` after every `

`, but *not* after the one that is the last child of its parent. To understand exactly how it means that, read on. First let’s look at the declaration: `content: "\00A0➤\00A0";`. `content` tells the rendering engine to insert whatever its value is. `00A0` is the Unicode number for a non-breaking space (in HTML we’d use ` `, remember?). To insert Unicode ID numbers in CSS, you preface them with a `\` (a backslash). In the middle of the value is ➤, a Unicode character identified as “[Black Right Arrowhead](https://www.fileformat.info/info/unicode/char/27a4/index.htm)”. Therefore, this declaration tells the rendering engine to insert a non-breaking space, then a ➤, & then a non-breaking space. Now let’s examine the selector. `.breadcrumb li` is easy: select every `

` that is a descendant of a ``. It’s everything after the `li` that’s a wee bit complicated. `::after` is a *pseudo-element* (you can tell by the `::` in front of it). If it simply said `li::after`, that would tell the rendering engine to insert the value of the `content` property (in this case, `\00A0➤\00A0`) after every `

`. Remember that our breadcrumb looks like this: Home / Products / Fertilizer If the selector was simply `.breadcrumb li::after`, it would now look like this: Home ➤ Products ➤ Fertilizer ➤ Hmmm. The first two uses of ➤ are fine, but we don’t want the one at the end! How do we tell the rendering engine to insert ➤ after every `

` *except* the last one? That’s where `:not(:last-child)` comes in. `:last-child` is a *pseudo-class* (you can tell by the `:` in front of it) that selects the last child of a parent element. If our selector was `.breadcrumb li:last-child`, that would target the last `

` that was the child of a parent element, if that `

` was a descendant of `.breadcrumb`. Say we had this HTML: ```html ``` In this case, `.breadcrumb li:last-child` would select the `

` around `Shoggoth`, because that `

` is the last child of its parent (here, `

` is a descendant of an element with a class of `breadcrumb`. Going back to `Home ➤ Products ➤ Fertilizer ➤`, we want to insert a ➤ after every `
` *except* the last child. That’s where `:not(:last-child)` comes in. `:not()` is another *pseudo-class* that let’s you specify DOM objects you do *not* want to select. You specify what you do not want to target by putting that selector inside the `()` after `:not`. In other words, `li:not(:last-child)` tells the rendering element that you want to select every `
` *except* the `
` that is the last child of a parent. Putting it all together, `li:not(:last-child)::after` specifies that you want to insert `\00A0➤\00A0` after every `
`, but *not* after the one that is the last child of its parent (and of course, those `
` elements have to be the descendant of an element with a class of `breadcrumb`). Thus, given a CSS selector that looks like `.breadcrumb li:not(:last-child)::after`, our breadcrumb will now look like this: Home ➤ Products ➤ Fertilizer The selector told the rendering engine to insert `\00A0➤\00A0` after each `
` (here, Home & Products) but not after the last child `
`, which here would be Fertilizer. Exactly what we want! Hopefully you can now see how specifically CSS let’s you target selectors, & you learned a bit more about pseudo-classes & pseudo-selectors. Live Preview!