I'm trying to apply border for all the aside articles except the last one. Here is my code:
<aside >
<div>
<h2 >Recommended articles</h2>
</div>
<div >
<!--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 >
<!--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:
-
.aside-container .aside-article:nth-child(1){ border-bottom: 2px solid black; }
-
.aside-container .aside-article:nth-of-type(1){ border-bottom: 2px solid black; }
-
.aside-container .aside-article:first-child{ border-bottom: 2px solid black; }
It works only when I give:
-
.aside-container .aside-article:nth-child(2){ border-bottom: 2px solid black; }
-
.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?
CodePudding user response:
You can use a combination of :not()
and :last-child
to style all .aside-article
s except the last one.
.aside-article:not(:last-child) {
border-bottom: 2px solid green;
margin-bottom: 1rem;
}
<aside >
<div>
<h2 >Recommended articles</h2>
</div>
<div >
<!--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 >
<!--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>
CodePudding user response:
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 >
<header>
<h2 >Recommended articles</h2>
</header>
<div >
<!--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 >
<!--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>