Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me.

The specific problem I am facing is related to changing the background-color of the "Right Button Active" element within a top-bar:

<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>

Within my css file, I have tried the following code:

.active a {
            background-color: red;
 }

Unfortunately, this code did not work as expected. I also attempted to use:

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

but it did not yield any results. The only selector that worked was:

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

However, I am struggling to comprehend why this particular selector works. Any assistance with CSS Selectors would be greatly appreciated. Thank you!

Answer №1

It appears that your selector is correct. You can check it out here: http://jsfiddle.net/BuA76/

However, there may be something overriding your rules.

Ensure that you load your CSS after all others and that your rules are at least as strict as the existing ones. For example, remember that #id takes precedence over .class in an element like <div id='id' class='class'></div>, and .parent .class is stricter than just .class.

If you need help calculating rule priorities and specificity, you can use this useful tool:

Answer №2

When it comes to customizing the default CSS file in Foundation 5, I have found that replacing it with my own allows for greater flexibility in manipulating the styles as desired. Whether opting for the entire selector structure as per Foundation's convention or simply using an ID, there are various solutions available. However, dealing with lengthy selectors can be cumbersome and time-consuming, which can be quite bothersome at times.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

The output generated by BeautifulSoup is consistently " b' ' "

No matter which html file I select, all I keep getting as output is b' '. from bs4 import BeautifulSoup html_doc = "C:/Users/George/Desktop/bsTest" soup = BeautifulSoup(html_doc, 'html.parser') print(soup.prettify()) Is there anyone ...

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still pl ...

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol ...

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css? element.style { "existing css;" } I'm trying to achieve the following result: element.style { existing css; opacity: 0; pointer-events: none; } But current ...

Issue with Custom CSS Class Not Displaying Correctly

I have implemented some unique CSS styles on a group of posts. You can view the site here. Upon inspecting the CSS classes of the posts, you will notice that the last two classes are .floats and .colThree. .colThree is being applied correctly with no issu ...

`When utilizing $routeParams, the CSS fails to load`

Whenever I use parameters in ngRoute and go directly to the URL (without clicking a link on the site), the CSS fails to load. All my routes are functioning properly except for /chef/:id. I utilized yeoman's angular generator, and I am running everythi ...

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

Encountering a JavaScript error due to an erroneous character when trying to parse

I need to convert a `json` string into an object format that is extracted from a `.js` file. Here is the `JSON` string located in `document.js`: [ { "type": "TableShape", "id": "63c0f27a-716e-804c-6873-cd99b945b63f", "x": 80, ...

OpenLayers' circular frames surrounding the icons

I am currently using openlayers and trying to implement a feature that creates a circle around the icons on the map. I have been referring to this example on Stack Overflow but unable to draw the circle successfully. Can someone please assist me with this? ...

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

Issue with the first-child selector

Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...

Struggling to make a basic ajax request function correctly

I've been experimenting with this code snippet in my browser's console. $.ajax({ type: 'GET', url: 'http://stackoverflow.com/', dataType: 'html', success: function() { console.log("Yes, t ...

What is the best method to calculate the dimensions of flex items without relying on percentages?

Imagine this as the structure of my HTML, with an unspecified number of div elements: <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div>& ...

Sending Image Data in Base64 Format with Ajax - Dealing with Truncated Data

My current challenge involves sending Base64 image data through ajax to the Server. I've noticed that sometimes all the pictures are successfully sent, but other times only a few make it through. Does anyone have suggestions on how to implement error ...

Problem with HTML produced by a loop

I am encountering difficulties when trying to create a collapsible list of elements. You can view my code on JSFiddle This is what my code looks like: <div class="projectscontainer"> <span class="item destproject" title="ID: 384">Kaoweuza ...

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...