The list items' text color stubbornly refuses to change

Why isn't the text color of my list changing? I've assigned a class nav to the links and tried styling it with CSS, but for some reason, it's not working.

HTML:

<ul>
    <li><a href="####" class="nav">info</a></li>
    <li><a href="###"  class="nav">facebook</a></li>
</ul>

CSS:

ul {
    padding-top: 6%;
    right: 9%;
    position: absolute;
    cursor: pointer;
    list-style: none;
}

a .nav {
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B !important;
}
htmlcss

Answer №1

a .nav should be changed to a.nav.

a .nav searches for any element with the class nav that is a child of an anchor. On the other hand, a.nav selects anchors that have the class nav.

Check out this jsFiddle example for reference

Additionally, it's recommended to refrain from using !important whenever possible.

Answer №2

The element selector you used, a .nav, contained a space which should be removed. Here is the corrected version:

a.nav {
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B;
}

Alternatively, it can also be written like this:

.nav a{
    font-family: 'Inconsolata', Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0px;
    font-weight: 100;
    color: #1B1B1B !important;
}

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

Printing a JSON array in Angular: A step-by-step guide

Take a look at this Stackblitz example https://stackblitz.com/edit/angular-parse-object Response format received from REST API is [{"id":123,"name":Test,"value":{"pass": true, "verified": true}}, {"id":435,"name":Test12,"value":{"pass": false, "verified" ...

htmltypescriptangular6

Hide the element with the attribute data-id if its value is null

My menu displays items that correspond to content on another list. MENU <ul id="gallery-list" style="display: none;"> <li class="close"></li> <li data-id="9425"><strong>item 1</strong></li> ...

javascriptjqueryhtmlcss

How can I prevent this image from expanding within the section?

I am currently utilizing Bootstrap 4.6 and WordPress along with the ACF Plugin, and I find myself in need of assistance. I am facing an issue where the height of a row in a section needs to adjust according to the content within a column, but the image wit ...

htmlcssbootstrap-4

Trouble with formatting in React

I am presented with the following code snippet that I did not author: render: function () { if(this.state.loading){ return <div><span><i className="fa fa-spinner fa-spin"></i> Loading...</span></div& ...

javascripthtmlreactjsrender

Tips for redirecting a HTML page to two different pages by utilizing two separate buttons:

To link to another HTML page, you can use the code below triggered by a button click: <form action="where-you-want-to-go"><input type="submit"></form> However, I am encountering an issue. How can I direct two different buttons on the sa ...

htmlhttp-redirectbuttonclick

Using a nested loop in Javascript to fetch JSON data

My goal is to display Categories and their corresponding subcategories in a specific order. However, my current method of using loops within loops is not producing the desired outcome: Category(Mobile) Category(Laptop) Subcategory(Iphone4) Subcategory(Iph ...

javascripthtmljsonloops

In Firefox, the Ajax Call is failing to initiate a response automatically

I am currently working on developing a dynamically generated accordion with nested subaccordions. A filter function has been successfully implemented to manipulate the content on the page using Ajax. In order to achieve this, the following function has bee ...

javascriptjqueryhtmlajaxfirefox

Is it feasible to add an image prefix to the li items using CSS?

How do I add a small image as a prefix to each "li" item? I couldn't find the right css attribute for this customization. ...

cssimage

jQuery document.ready not triggering on second screen on Android device

Why is jQuery docment.ready not firing on the second screen, but working fine on the first/initial screen? I also have jQuery Mobile included in the html. Could jQuery Mobile be causing document.ready to not work? I've heard that we should use jQuery ...

javascriptandroidjqueryhtmljquery-mobile

The hover drop-down menu in CSS is not appearing in the correct position

Having trouble with my navigation bar - the dropdown menu isn't showing up below the category when I hover over it. It keeps ending up in the left-hand corner and I can't access it! I've searched everywhere for a solution, but can't fin ...

htmlcssnavbarnav

Insert a line break element following every 12th character within a given string

$my_string = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." Desired Output : "Lorem Ipsum <br/> is simply<br/> dummy text<br/>of the printing<br/> and typesetting<br/> industry." The tag should ...

phphtmlstring

Exploring off-canvas mobile navigation with a focus on subtle impacts

Seeking a Solution I am in search of a JavaScript (jQuery) library that offers off-canvas navigation specifically designed for mobile devices. The library should provide a native-like user experience, have minimal impact on the existing page structure, an ...

javascriptjqueryhtmlcssnavigation

Need to convert an HTML table to JSON format? Visit convertjson.com/html-table-to-json.htm to easily convert your HTML table

Can anyone help me with converting HTML table data to JSON? I found a website that does something similar: I have tried some solutions but encountered issues at the end. I just need a JSON output to convert it into an array and continue with my project. ...

phphtmljsonruby

Is there a way to view images embedded in local .msg files in a web browser in HTML format?

Does anyone know how to display embedded pictures in local .msg files when opening them in a web browser using HTML format? Currently, when I open the .msg file with embedded pictures, all I see is a blank space indicating "picture not found." Interestin ...

htmlvb.netoutlookmsg

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

htmlcssionic-framework

Utilizing a 2-Page method to sort through a table in Angular

I'm new to angular and looking for a way to create a single page where users can input filter information for a table. When they click "search," I want it to take them to a second page where the filtered table is displayed. It may seem like an unusu ...

htmlangulartypescript

Display an Asterisk Icon for md-input fields with lengthy labels

Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspectiv ...

javascripthtmlcssangularjs

Incorporating navigation controls into a modal window

I have successfully created a sign-in modal, but now I'm looking to include buttons at the top. One button should redirect users to register/sign up, and the other button should lead them back to the sign-in modal, as shown in the image I've link ...

javascripthtmlcssbootstrap-5

What is the best way to implement a single script for two different IDs on a single webpage?

I have a liking script that retrieves an ID from PHP and inserts the ID into the database. The script then displays the result by the corresponding ID. I am using the same HTML code and script for different IDs, but the slideshow result opens on the first ...

htmlslidedown

Using PHP and AJAX to send a form

Currently, I am attempting to integrate ajax functionality into my form in order to submit it without refreshing the page. However, I have encountered an issue with the php echo command not functioning as expected. When I remove the ajax code, the form s ...

phpjavascripthtmlajax