0

How do I overwrite a css stylesheet in the html code? corresponding problem with <ul> and <li>

Hey there. So, I have a css where I define <ul> and <li> for my top navigation. How do I stop this stylesheet from working? Can I limit the stylesheet to the topnav only? - I have a few lists later on where I'm using <ul>, and therefore <li>, as well, but css "destroys" that. For example: One point in my css is: ul {list-style-type: none} but I want to show the dots later on etc. I hope you're getting what I'm trying to say. Thanks for your answers already. Greetings. :)

4th Feb 2020, 4:19 PM
Jessica Gräfe
Jessica Gräfe - avatar
3 odpowiedzi
+ 2
make a class .nodots {list-style-type: none} now you can add the class to ul from js to remove the dots or remove the class to show it. let ulelement = document.querySelector('ul') ulelement.classList.add('nodots'); //remove dots ulelement.classList.remove('nodots'); //dhow dots
4th Feb 2020, 4:24 PM
Taste
Taste - avatar
0
First of all: thank you, but it's not only about the dots. Here's my full css: Do I have to create a class for every single one of these (<ul> & <li>)? ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: linear-gradient(#D68C56, rgb(209, 159, 106)); } li { float: left; border-right: 1px solid #FFF0B1; } li a { display: block; color: #FFF0B1; text-align: center; padding: 14px 16px; text-decoration: none; } li:last-child { border-right: none; } /* Change the link color to #111 (black) on hover */ li a:hover { color: #5A3A29; } /* Not working yet */ .active { background-color: #4CAF50; } /* Dropdown */ li a, .dropit { display: inline-block; color: #FFF0B1; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropit { color: #5A3A29; } li.dropdown { display: inline-block; }
4th Feb 2020, 5:02 PM
Jessica Gräfe
Jessica Gräfe - avatar
0
only the parts that you want to toggle.
4th Feb 2020, 5:08 PM
Taste
Taste - avatar