What is the best way to change styles in CSS for parent and child elements using selectors?

Hey there! I am currently working on customizing the navigation menus in WordPress and here is the HTML code for the navigation menus:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    <h1 class="menu-toggle">Primary Menu</h1>
    <a class="screen-reader-text skip-link" href="#content">Skip to content</a>
    <div class="menu-primary-menu-container">
        <ul id="menu-primary-menu" class="nav-menu">
            <li id="menu-item-25" class="recipes menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="">Recipes</a></li>
            <li id="menu-item-26" class="wine menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="">Wine</a></li>
            <li id="menu-item-27" class="cocktails menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="">Cocktails</a></li>
        </ul>
    </div>
</nav>

Furthermore, the CSS code responsible for controlling the background color of the menu items upon hover is shown below:

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
        background-color: #24890d;
        color: #fff;
}

I have attempted to assign individual background colors to each menu item upon hover using the following CSS but it did not yield the desired results:

.primary-navigation .recipes li:hover > a,
.primary-navigation .recipes li.focus > a {
        background-color: #e5ebd5;
        color: #fff;
}

.primary-navigation .wine li:hover > a,
.primary-navigation .wine li.focus > a {
        background-color: #8d89a1;
        color: #fff;
}

.primary-navigation .cocktails li:hover > a,
.primary-navigation .cocktails li.focus > a {
        background-color: #85b0ad;
        color: #fff;
}

I would appreciate any guidance on what might be the issue with my approach and how I can achieve the desired outcome effectively.

Additionally, I am wondering if I need to remove the original CSS code that currently manages the background color on hover for all menu items or if there is a method to override it?

Thank you for your assistance,

Shyam Singh

csswordpresscss-selectors

Answer №1

After reviewing my previous feedback, here is the corrected way to define the selectors:

.primary-navigation  li.recipes:hover > a,
.primary-navigation  li.recipes:focus > a {
        background-color: #e5ebd5;
        color: #fff;
}

.primary-navigation  li.wine:hover > a,
.primary-navigation  li.wine:focus > a {
        background-color: #8d89a1;
        color: #fff;
}

.primary-navigation  li.cocktails:hover > a,
.primary-navigation  li.cocktails:focus > a {
        background-color: #85b0ad;
        color: #fff;
}

By following this syntax, you are specifically targeting li elements with the recipes class. Previously, you were selecting li elements inside a recipes class.

UPDATE as per BoltClock's response: It's important to note that "focus" is a pseudo-class, not an actual class (for pseudo-classes, use ":" instead of "." )

View Demo on Fiddle

Answer №2

Revise

.primary-navigation .recipes li:hover > a
.primary-navigation .wine li:hover > a
.primary-navigation .cocktails li:hover > a

Replace it with the following (and do the same for :focus)

.primary-navigation .recipes:hover > a
.primary-navigation .wine:hover > a
.primary-navigation .cocktails:hover > a

This is because you are trying to target the li element itself instead of looking inside the li element.

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

Bootstrap: when divs cover the jumbotron

I have recently started exploring bootstrap and have been using it to build a homepage for my website. However, I am facing an issue: The three images are overlapping the jumbotron section and I can't seem to figure out why. Below is the HTML code sn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Make sure to define the image path in the CSS file of your WordPress project

When working on my WP 4.2 project, I encountered a situation in the CSS file where I had to write: background-image: url('/wp-content/plugins/artistssongs/images/fancybox_sprite.png'); However, I find it inconvenient to display the full path to ...

csswordpress

What is the best way to adjust the location of the date picker or calendar icon in an HTML and CSS setup, without relying on

Currently, I am using a date picker with the calendar icon placed on the right side of the input field by default. However, I would like to move the calendar icon to the beginning of the input field. Despite my efforts to change it, I have not been success ...

htmlcss

Discover the secret sauce to effortlessly adding text upon hovering over a button

I am completely new to CSS and only know the basics. Recently, I stumbled upon this code online that creates a button. However, I want to use an image inside the button, add a color overlay when hovered, and display text saying "LEARN MORE" upon hovering ...

css

Help! My HTML/CSS (Bootstrap) text won't center properly. Can anyone assist me?

My text doesn't seem to be centered on the page, despite using the "text-center" class for the caption text. What am I missing here? <div class="text-center"> <h1>Evelyn Lauder </h1> <h5 class="font-italic"> 1936-2011</ ...

htmlcssbootstrap-4

The text box is intersecting with the photo

Struggling to craft a clean layout with an upvote button, I encountered an issue where the textarea appears to overlap with the image. Below is my sample code snippet: .my-component-row { display: flex; justify-content: center; align-items: center ...

htmlcssbootstrap-5

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

javascriptjqueryioscsscordova

Angular2's hidden feature isn't functioning properly

There is a common suggestion to use *ngIf better than [hidden] but in my scenario, I want to keep the element in the DOM without it being visible. In my component.html file, I have: <article #articleId id="bodyArticle" [hidden]="isClicked"></art ...

javascripthtmlcssangulartypescript

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

Transform the appearance of the datepicker with jquery-ui

Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...

cssjquery-uidatepickercdn

What is causing nth-of-type to behave like nth-child?

My goal is to alternate colors for elements with a certain class, ignoring any elements of different classes in between them. Despite my attempts to use nth-of-type, I have encountered issues with its functionality in Firefox and Chrome. http://jsfiddle.n ...

htmlcsscss-selectors

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

javascriptjqueryhtmlcss

Is it possible to utilize nth-child() without recursion?

Can the CSS selector parent child:nth-child() be used to target only children? The HTML code is as follows: <body> <div>div 1</div> <div> div 2 <div>div 2.1</div> <div>div 2.2</ ...

htmlcss

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

htmlcssangulartypescriptng-class

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

Choosing colors for Font Awesome icons

Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...

cssfont-awesome

The value of the HTML input control vanishes once padding is added

I am in need of some assistance with CSS in formatting the text box for BID VALUE (input element) (See in Image 1) Image 1 https://i.sstatic.net/4fQk8.jpg The product link can be found here When I try to widen the text box using padding, the text value in ...

htmlcsswordpress