CSS: The sub-class functionality is not functioning as intended

Having trouble with this HTML element :

<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>

These are the CSS classes :

.item-menu-notif{
    display: block;
    cursor: pointer;
    padding: 0 0.4em 0 0.4em;
}

span.item-menu-notif:hover{
    background: #aaaaaa;
}

span.item-menu-notif .non-lue{
    font-weight: bold;
}

The issue is that the non-lue class is not being used. When inspecting in Firebug, it doesn't appear on my span element.

I've attempted to troubleshoot by adding or removing the span selector in my CSS, but it's yielding the same result. Any insights on why this might be happening?

htmlcss

Answer №1

Make sure to eliminate the gap between the selectors:

span.item-menu-notif.non-lue

The space should only be used if you are targeting elements that are descendants. In this case, to target the element with both classes, it is essential to remove the space between them.

Answer №2

It is due to the 

span.item-menu-notif .non-lue{
    font-weight: bold;
}

This code tells the browser to locate an element with the class '.non-lue' that is within a span element with the class name 'item-menu-notif'.

To specify a more specific rule for an element, like in your case where you need a span element that has both 'item-menu-notif' and 'non-lue' classes, you should list the class names without any spaces between them (using a space between selectors implies a descendant relationship).

Here are some helpful resources for understanding CSS selectors and specificity rules:

1)

2) https://css-tricks.com/specifics-on-css-specificity/

3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And remember, the correct answer is:

span.item-menu-notif.non-lue{
    font-weight: bold;
}

Answer №3

When using this selector, it specifies that any element with a class of .non-lue within a span will receive styling, rather than the span itself.

span.item-menu-notif .non-lue{ font-weight: bold; }

If you eliminate the space, the selector will target a span with both .item-menu-notif and .non-lue classes, instead of just .non-lue inside a span.

span.item-menu-notif.non-lue{ font-weight: bold; }

Answer №4

It is recommended to follow these steps

div.item-menu-notif.non-lue{
    font-weight: bold;
}

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

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

phphtmlcsspdfdompdf

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...

javascriptjqueryhtmlcssviewport

Tips for modifying padding in HTML and CSS?

I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried: float-right or padding-right:250px; // but nothing happens and it affects the mobile view. Please review my code: .fontProfile ...

htmlcsshtml5-canvasmedia-querieshtml5-video

How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...

htmlcssflexbox

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

csssass

The unattractive visual outcome of Three.js rendering

My goal is to generate a 3D map of buildings using Three.js, based on a 2D SVG file. The process involves taking each path from the SVG, utilizing transformSVGPath from d3.js to create a shape, and then extruding it as shown below: var material = new THRE ...

htmlsvgd3.jshtml5-canvasthree.js

Seeking help on modfiying div content with AJAX - any tips for showing navigation using hash or anchor?

Looking to create a dynamic page that updates content within a div asynchronously while also providing users with direct access to specific content within the div by using anchors (e.g. www.website.co.uk/#page1). I've successfully implemented the upd ...

javascriptjqueryhtmlajax

Revamp the appearance of angular material inputs

I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...

javascripthtmlcssangularjsangular-material

Create a slider feature on a webpage using the Google Maps API

A webpage has been created using the Google Map API. JSfiddle function initMap() { var intervalForAnimation; var count = 0; var map = new google.maps.Map(document.getElementById('map'), { cen ...

javascriptjqueryhtmlgoogle-maps

Retrieve the XPath for the elements that combine to create a specific string within an HTML document

Issue: Searching for the xpath of node(s) that contribute to a text string in an HTML document. Using Python language (lxml to parse the document) To demonstrate, let's examine the following document: <HTML> <HEAD> <TITLE>samp ...

pythonhtmlregexxmlxpath

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

pythonhtmlseleniumhref

What steps do I need to take to create a basic API that links to a MySQL database?

I'm currently trying to develop an API for PHP that will enable one web server to communicate with another web server. Additionally, I want this API to be able to update MySQL code. Previously, I was utilizing $_GET parameters for this purpose but rea ...

phpmysqlhtml

What is the best way to embed a video and playlist onto a webpage using HTML5?

After switching from the flash-based JWPlayer 4 to JWPlayer 5 with HTML5 support, I noticed that while the player degrades gracefully on mobile devices without Flash but with HTML5 support, it breaks when the playlist option is enabled. Can someone please ...

htmlvideomp4jwplayer

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs

Customize style with Dart programming language

Is it possible to modify a HTML element's CSS with DART? I've searched around but couldn't find clear instructions on how to accomplish this or if it's feasible at all. The main objective is to alter the position of a button on a webp ...

htmlcssdynamicdart

The website's responsiveness appears to be malfunctioning on iPhone 10 and other iOS devices

I have implemented the code below for redirecting my website in an iframe, and it displays perfectly on all browsers except Safari on iPhone. I have tested it on various models of iPhones. <head> <title>My Website</title> <meta name=" ...

htmlioscssiphonebootstrap-4

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

jqueryhtmlcssangularjs

What is the highest value that AutoCompleteExtender can reach?

I am currently using an AutoCompleteExtender in my code with the following configuration: <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoCompleteOrigem" TargetControlID="txtClienteOrigem" ServicePath="~/Cliente/Au ...

htmlajaxajaxcontroltoolkitascx

Tips on aligning objects within div elements

I am currently in the process of learning how to create websites. Below is the body tag of my website: <body> <h1 id="title">Title</h1> <div id="loginContainer"> <img id="usernameIcon" src="assets/images/usern ...

htmlcsspositioncss-position