I'm currently working on designing a sidebar and I'm trying to figure out how to remove text decoration using the first-child selector. Here is a snippet of the HTML code I am working with:
<aside>
<nav>
<div id="guide-item" class="content"> <a href="#">Home</a> </div>
<div class="horizontalLine"></div>
<div id="guide-item" class="content"> <a href="#">News</a> </div>
<div id="guide-item" class="content"> <a href="#">Videos</a> </div>
<div class="horizontalLine"></div>
</nav>
</aside>
The desired effect for this sidebar is similar to the navigation bar on Google+. Here is an example of the CSS code I have implemented:
/* Left Sidebar */
aside {
float: left; position: fixed;
margin-top: 50px;
background: #ffffff;
height: 100%; width: 230px;
box-shadow: 0 0 55px rgba(0, 0, 0, 0.06);
z-index: 1;
}
aside a:first-child {
text-decoration: none;
color: inherit;
}
#guide-item.content {
padding: 13px 22px;
}
.content:hover {
background: #f5f5f5;
}
.horizontalLine {
border-bottom: 1px solid #e5e5e5;
}
It's important to note that I am new to programming and just a teenager exploring web development. Thank you for taking the time to read through my question.