CODEWITHSUNDEEP
htmlcsscss-selectorszurb-foundation
web rocker
web rocker

Reputation: 217

Foundation CSS selector

I'm using Foundation 5 and has some trouble about css selector: I can't select correctly what I want, wierd:

This is a top-bar and I hope to change the background-color of "Right Button Active": 

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

In css file, I wrote this:

.active a {
            background-color: red;
 }

It doesn't work, and I've tried 

.top-bar-section ul.right li.active a

and got nothing. The only valid one is 

 .top-bar-section li.active:not(.has-form) a:not(.button)

but I can't understand. Can anyone give me some help about CSS Selector? Thank you!

Upvotes: 0

Views: 245

Answers (2)

Shomz
Shomz

Reputation: 37701

Your selector seems fine. http://jsfiddle.net/BuA76/

Something is overriding your rules.

Make sure you load your css after all the others then, and also that your rules at least as strict as theirs - for example, #id has a higher priority than .class on the element <div id='id' class='class'></div>... .parent .class is stricter than just .class, etc...

Here's a nice tool for calculating rule priorities/specificity: http://specificity.keegan.st/

Upvotes: 1

web rocker
web rocker

Reputation: 217

The Foundation 5 default CSS file remplace the mine so I can manipulate what I choose as I will. Either the whole selector as Foundation uses or an ID could solve the problem. It is just annoying to type that a long selector.

Upvotes: 1

Related Questions