CODEWITHSUNDEEP
phphtmlcsscodeigniter
Jonathan George
Jonathan George

Reputation: 125

li Class of 'active' not targetable by CSS

I've done this 1000 times, and this may be because I'm frustrated that I can't figure it out, but I am having so much trouble changing the appearance of my nag bar links based on the active page.

I'm using Codeigniter, so here is my navbar code:

<div id="wrapper">
        <div class="nav">
            <ul>
                <?php if ($this->uri->segment(1) === FALSE) { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/">home</a></li>
                <?php if ($this->uri->segment(1) == 'about') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/about">about</a></li>
                <?php if ($this->uri->segment(1) == 'music') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/music">music</a></li>
                <?php if ($this->uri->segment(1) == 'contact') { echo "<li class='active'>"; } else { echo "<li>"; } ?><a href="/contact">contact</a></li>
            </ul>
        </div>
</div>

Second, here is the CSS that's Supposed to change the appearance of the links:

#wrapper .nav ul li .active a {
    color: grey;
    cursor: default;
}

I'm at a complete loss of why this doesn't work. If someone would be so kind as to knock me upside the head and remind me why I'm an idiot that would be great.

Thanks.

Upvotes: 2

Views: 1483

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

Removed the li before .active like so:

#wrapper .nav ul .active a {
    color: grey;
    cursor: default;
}

jsFiddle here

You were trying to style a child of li with the class .active

Alternatively, you could also use:

#wrapper .nav ul li.active a {
    color: grey;
    cursor: default;
}

jsFiddle here

...either work.

Upvotes: 6

Related Questions