My quest to grasp the ins and outs of CSS continues, but tutorials I've encountered so far are only skimming the surface.
I'm particularly trying to wrap my head around the fundamental variances between using #navlist li #current and #navlist li .current.
I'll use non-generic names for a practical illustration.
Here's what I believe the distinction is:
#navlist li #current
If applied to an li element within a parent element #navlist, it will override any inherited styling to display the format specified in #navlist li #current.
On the flip side:
#navlist li .current
will apply its own formatting while also inheriting from other styles.
In this scenario:
#navlist li a:hover
{
color: #FFFFFF;
background: #3364BB;
border-color: #0F3974;
}
#navlist li .current
{
color: #000;
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}<ul id="navlist">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Discuss</a></li>
</ul>The tab will have white background with black font initially but hover effect will be applied.
In this alternate example:
#navlist li a:hover
{
color: #FFFFFF;
background: #3364BB;
border-color: #0F3974;
}
#navlist li #current
{
color: #000;
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}<ul id="navlist">
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Discuss</a></li>
</ul>#current is specifically applied without any additional styling, which results in the tab remaining white even upon hovering over it.
Does that align with your understanding?