How do we not apply border for the last element in a container

Question

I'm trying to apply border for all the aside articles except the last one. Here is my code:

<aside class="aside-container">
  <div>
    <h2 class="aside-header">Recommended articles</h2>
  </div>
  <div class="aside-article">
    <!--https://in.pinterest.com/pin/435934438902596641/-->
    <img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
    <h3>
      <a href="https://www.thrillophilia.com/luxury-resorts-in-coorg">Famous resorts to stay in Coorg</a>
    </h3>
  </div>
  <div class="aside-article">
    <!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
    <img src="images/TeaEstate.jpg" alt="Picture of a tea plantation with a text" height="200" width="200" />
    <h3>
      <a href="https://www.holidify.com/hotel-collections/tea-estates-in-coorg">Must visit tea estates in Coorg</a>
    </h3>
  </div>
</aside>

I have tried the following CSS methods:

1. .aside-container .aside-article:nth-child(1){
      border-bottom: 2px solid black;
   }
   

2. .aside-container .aside-article:nth-of-type(1){
      border-bottom: 2px solid black;
   }
   

3. .aside-container .aside-article:first-child{
      border-bottom: 2px solid black;
   }
   

It works only when I give:

1. .aside-container .aside-article:nth-child(2){
      border-bottom: 2px solid black;
   }
   

2. .aside-container .aside-article:nth-of-type(2){
      border-bottom: 2px solid black;
   }
   

But it should work only for 1 instead of 2 right? Can someone please explain the logic behind this?

Answer 1

You can use a combination of :not() and :last-child to style all .aside-articles except the last one.

.aside-article:not(:last-child) {
  border-bottom: 2px solid green;
  margin-bottom: 1rem;
}

<aside class="aside-container">
  <div>
    <h2 class="aside-header">Recommended articles</h2>
  </div>
  <div class="aside-article">
    <!--https://in.pinterest.com/pin/435934438902596641/-->
    <img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
    <h3>
      <a href="https://www.thrillophilia.com/luxury-resorts-in-coorg">Famous resorts to stay in Coorg</a
        >
      </h3>
    </div>
    <div class="aside-article">
      <!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
      <img
        src="images/TeaEstate.jpg"
        alt="Picture of a tea plantation with a text"
        height="200"
        width="200"
      />
      <h3>
        <a
          href="https://www.holidify.com/hotel-collections/tea-estates-in-coorg"
          >Must visit tea estates in Coorg</a
        >
      </h3>
    </div>
  </aside>

Answer 2

As your layout with one exception: first <div> is replaced by <header> which doesn't affect anything. :last-of-type or :last-child is what you need, the former being a safer choice.

aside .aside-article {
  border-bottom: 3px ridge tomato;
}

aside .aside-article:last-of-type {
  border: 0;
}

Read further for details.

aside .aside-article {
  border-bottom: 3px ridge tomato;
}

aside .aside-article:last-of-type {
  border: 0;
}

<aside class="aside-container">
  <header>
    <h2 class="aside-header">Recommended articles</h2>
  </header>
  <div class="aside-article">
    <!--https://in.pinterest.com/pin/435934438902596641/-->
    <img src="images/Resort.jpg" alt="Picture of a pool side view in a resort" height="200" width="200" />
    <h3>
      <a href="https://www.thrillophilia.com/luxury-resorts-in-coorg">Famous resorts to stay in Coorg</a
            >
          </h3>
        </div>
        <div class="aside-article">
          <!--https://in.pinterest.com/pin/AXklVB0pJT_-hAH3OJd413VeUs8U6W_ovrbYWPiertoMr4VtOrekRPE/-->
          <img
            src="images/TeaEstate.jpg"
            alt="Picture of a tea plantation with a text"
            height="200"
            width="200"
          />
          <h3>
            <a
              href="https://www.holidify.com/hotel-collections/tea-estates-in-coorg"
              >Must visit tea estates in Coorg</a
            >
          </h3>
        </div>
      </aside>

The layout resembles a navbar. The example below is a semantic layout.

• The semantic elements are a <nav> which replaces <aside> and a <header> which replaces a <div>. I used to think <aside> was a sidebar but it actually can be a sidebar or in the flow of content as well. It should have content indirectly related to the main content. Arguably a group of links to other related articles could be considered <aside> content, but the <nav> is more appropriate for links that take the user somewhere.

• The non-semantic HTML is semantic as a whole since they logically provide the structure and functionality of a navbar: <ul>, <li>, and <a>. Using <h2> and <h3> on non-palpable content is questionable but it does look more organized.

• Each <img> and <h3> is wrapped in a <a> since users (including myself if I trust a site) click images if they look like they are associated with the text of a link.

• No classes are assigned only type selectors are used to clearly illustrate the use of the :nth-of-type pseudo-class.

  nav li:last-of-type {
    border-bottom: 0;
  }
  

  That applies to all <li> that are the last of it's sibling <li> and are descendants of a <nav>.

If you still prefer to use <aside>, replace the first <div> with <header> and the rest of the <div> with something less generic like <article>. In the CSS replace nav with aside and li with article, then remove ul and replace it with:

aside {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

The most imporatant thing I hope you get out of this is to avoid using <div> (and <span>) as much as possible because if you expand your HTML in the future, it can become a mass of unreadable markup bloated with divs having multiple hyphenated classes.

Note: Other than the style applied to the <li> directly, it is suggested styles since the unmentioned CSS and HTML isn't included.

nav {
  text-align: center;
}

ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

nav li {
  margin-bottom: 8px;
  border-bottom: 3px ridge tomato;
}

nav li:last-of-type {
  border-bottom: 0;
}

nav li a {
  display: block;
}

<nav>
  <header>
    <h2>Nav Header</h2>
  </header>
  <ul>
    <li>
      <a href="https:/example.com">
        <img src="https://via.placeholder.com/200">
        <h3>First LI Title</h3>
      </a>
    </li>
    <li>
      <a href="https:/example.com">
        <img src="https://via.placeholder.com/200">
        <h3>LI Title 2</h3>
      </a>
    </li>
    <li>
      <a href="https:/example.com">
        <img src="https://via.placeholder.com/200">
        <h3>LI Title 3</h3>
      </a>
    </li>
    <li>
      <a href="https:/example.com">
        <img src="https://via.placeholder.com/200">
        <h3>LI Title 4</h3>
      </a>
    </li>
    <li>
      <a href="https:/example.com">
        <img src="https://via.placeholder.com/200">
        <h3>Last LI Title</h3>
      </a>
    </li>
  </ul>
</nav>