Focusing on a specific element within two nested div containers

Dealing with WordPress can be frustrating at times, especially when trying to style a menu that is auto-generated by the platform.

Here is the basic HTML structure:

<div class="footer">
  <!--Generated By Wordpress-->
  <ul class="menu">
    <li class="menu-item">
      <a></a>
      <ul class="sub-menu">
        <li class="menu-item">
          <a></a>
        </li>
      </ul>
    </li>
  </ul>
  <!--End Generated-->
</div>

I am looking to write CSS code that specifically targets the <a> elements within the sub-menu, without affecting the main menu. Additionally, I need this styling to only apply to the footer menu and not interfere with any other menus on the site.

Is using the following CSS selector the correct approach?

.footer .sub-menu a { }

What would be the most appropriate method to achieve this?

htmlcsswordpress

Answer №1

It seems that you are correct, and there are several ways to achieve this:

1

.nav .sub-menu a{}

2

.nav ul.sub-menu a{}

3

ul.sub-menu a{}

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

Error: Attempting to access 'position' property of undefined object in ThreeJs is causing a TypeError

I am currently facing an issue with integrating a 3D model into the background of the hero section on my website. The integration works fine, but I noticed that when I manually resize the window, the 3D model does not adjust to the new size. Additionally, ...

javascripthtmlcssthree.js

Trouble exporting to Excel on Chrome and Firefox browsers

I am having an issue with exporting tables to Excel using JS. The <table> tag contains some descriptions and a class (<table class="someClassName" border="0" cellpadding="0" cellspacing="0">). When the table is exported to Excel, the Excel fil ...

jqueryhtmlgoogle-chromefirefoxexport-to-excel

Creating a Chrome extension that opens multiple tabs using JavaScript

Currently, I am working on a chrome extension that includes several buttons to open different tabs. However, there seems to be an issue where clicking the Seqta button opens the tab three times and clicking the maths book button opens the tab twice. Below, ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

htmlimagecssresizeresponsive-design

Find the total number of divs with a specific class using jQuery, and then retrieve the id strings of the inner

How can I count the total number of divs by their class name and extract specific parts from their inner div IDs? Here is a sample code snippet: <div class=”my_block1”> <div class=”my_block2”> <div id=”my-style-35-area ...

javascriptjqueryhtml

Creating a dynamic button with Angular that appears when focused

I want to have a button appear when the user focuses on an input with the ng-model=query. I know there is an ng-focus directive, but how can I implement it? <input type="search" ng-model="query"> <!--this is the button I need to show once th ...

javascriptangularjscss

Does Somebody Possess a Fine Floating Tag?

Some time ago, I came across this floating label that I have been searching for ever since. I experimented with a few that appeared promising and initially worked well, but they ended up presenting their own issues. Some required the mandatory attribute f ...

javascriptcsslabelplaceholderfloating-labels

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Ways to establish a minimum height for material cards using Material UI

I am facing an issue with a card that contains a nested table. The card expands and shrinks based on the size of the table inside it. I want to prevent the card from shrinking when the table has no data or just one entry. Instead, I need the card to mainta ...

javascriptcssreactjsmaterial-ui

A guide on dynamically checking the checkbox values in each row of a table using JavaScript or jQuery

My table is dynamically populated with values from a database using the following code: var row = table.insertRow(i); i = i+1; // Insert new cells (<td> elements) at the 1st and 2nd position of the new <tr> element: var cell1 = row.insertCell ...

javascriptjqueryhtmlcheckbox

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...

htmlcssipadsafariflexbox

Message displayed within Ng-repeat loop

Having trouble implementing a tooltip within an ng-repeat for each item in a td element. Whenever the mouse hovers over an item inside the td, I want a tooltip to display with more details. The code below shows my setup, using ng-if to prevent displaying e ...

javascriptjqueryhtmlangularjs

What technique is used to fill these circular progress indicators?

I stumbled upon some circular progress bars and I'm a bit confused about how they are filled. Check out this codepen link: https://codepen.io/anon/pen/aeEEmx From what I understand, when using gradients with specified positions (degrees in this case) ...

htmlcssgradient

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

A guide on utilizing ClassName to insert new items into a DIV

Original HTML code: <span class="specLink"> <specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty> </span> <br /> <span class="specLink"> <specialty2><a titl ...

javascriptjqueryhtml

The responsiveness of the bootstrap mobile view is experiencing some technical difficulties

https://i.sstatic.net/IuQXa.pngUsing Bootstrap 4 in my project and I have implemented the following bootstrap codes with an external CSS file in the HTML view, <div class="jumbotron rounded-0"> <div class="container"> &l ...

htmlcssbootstrap-4

Failure to send AJAX POST data

When the login button is clicked, I want to send the contents of the email text box. However, nothing happens when I click the login button. Here is the file directory structure: Model/ <-- configuration.php is located inside the Model ...

javascriptphpjqueryhtmlajax

Hiding a description on the mobile version of a Blogger website can be achieved by applying CSS

Can anyone assist me with a CSS code problem I'm facing? I tried to hide the blog description using the code below, but it's not working on the mobile version. Any suggestions? .header .description { display : none; } ...

cssblogger

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

javascripthtmlcssnode.jsexpress

Display issue with loading animation

After clicking the button and seeing the alert message, I noticed that the loading animation does not display during the await new Promise(r => setTimeout(r, 2000));. /* script.js */ async function refreshStatus() { document.getElementById("load ...

javascriptcss