CODEWITHSUNDEEP
csscss-selectors
Tiago
Tiago

Reputation: 4480

CSS :first-child unexpectedly working fine

I'm building a website using Bootstrap.

I want to customize my .navbar by adding an underline effect to its a:active elements except the first one, which would be where my brand name or home link would be, as you can see on the screenshot below:

enter image description here

I achieved this effect with the following snippet:

.navbar {
    a:first-child {
        &:active span, &:focus span {
            border-bottom: 2px solid $secondary;
        }
    }
}

What's interesting to me is that I thought this would have the opposite effect, since I am selecting the :first-child and not :not(:first-child).

Why is it working correctly then?

Here's the complete HTML structure of my navbar.

<div class="navbar navbar-inverse navbar-fixed-top smooth unselectable" role="navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar top"></span>
                        <span class="icon-bar mid"></span>
                        <span class="icon-bar bot"></span>
                    </button>
                    <a class="navbar-brand" href="" scroll-to="home"><span class="brand">dark<span>peaches</span></span></a>
                </div>
                <div class="collapse navbar-collapse" id="js-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#three-eyed-snake" class="smooth" scroll-to="about"><span>About</span></a></li>
                        <li><a href="#three-eyed" class="smooth" ><span>Projects</span></a></li>
                        <li><a href="#three" class="smooth" ><span>Contact</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 53

Answers (1)

Paulie_D
Paulie_D

Reputation: 115351

All the menu links are the first-child of their respective parent li.

The navbar-brand link is not a first-child....as it's preceded by the div navbar-header.

Perhaps you are confusing first-of-type?

Upvotes: 2

Related Questions