hwl-js-includes.md

You can find these instructions at https://chnsa.ws/25r.

Create new folders: js & includes.

Create new file in includes: footer.html.

Cut <footer> … </footer> from index.html & paste into footer.html & save it.

Create new file in js: include.js.

Copy code from https://chnsa.ws/25p into include.js & save it.

Where <footer> … </footer> used to go, enter this instead:

<script>
  includeHTML('/includes/footer.html', 'main');
</script>

Enter <script src="/js/include.js"></script> in <head> (or at least above where you call the includeHTML function).

Live Preview!

Now find & replace <footer> … </footer> with the <script> lines above.

Go look at the code for /services/landscape-maintenance.html & you’ll notice that it didn’t get replaced. Manually do that.

Go to footer.html & add .social-media-icons onto the <ul> that contains the icons.

Live Preview /services/landscape-maintenance.html.

Create new file in js: breadcrumb.js.

Copy code from https://chnsa.ws/25q into breadcrumb.js & save it.

Cut the following from fertilizers.html:

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li>Fertilizers</li>
  </ol>
</nav>

In its place, enter this:

<script src="/js/breadcrumb.js"></script>

Add an ID of header onto the <header› element, like this:

<header id="header">

Add this 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 <li>, 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 &nbsp, 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”. 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 <li> that is a descendant of a <breadcrumb>. 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 <li>.

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 <li> 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 <li> that was the child of a parent element, if that <li> was a descendant of .breadcrumb. Say we had this HTML:

<div class="breadcrumb">
  <ul>
    <li>Cthulhu</li>
    <li>Nyarlathotep</li>
    <li>Shoggoth</li>
  </ul>
</div>

In this case, .breadcrumb li:last-child would select the <li> around Shoggoth, because that <li> is the last child of its parent (here, <ul>), & that <li> is a descendant of an element with a class of breadcrumb.

Going back to Home ➤ Products ➤ Fertilizer ➤, we want to insert a ➤ after every <li> 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 <li> except the <li> 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 <li>, but not after the one that is the last child of its parent (and of course, those <li> 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 <li> (here, Home & Products) but not after the last child <li>, 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!

rsgranne/hwl-js-includes.md