I have a navigation menu, footer, and a slideshow which use listed style to list links and images. I have the css list-style:none; set to hide the bullets next to the links and images in the nav and footer but I want to show the bullets for list normal text.
How can I do this?
This question is related to
html
html-lists
when bullet have to hide then use:
li { list-style: none;}
when bullet have to list show, then use:
li { list-style: initial;}
Let's say you're using this HTML5 layout:
<html>
<body>
<header>
<nav><ul>...</ul></nav>
</header>
<article>
<ul>...</ul>
</article>
<footer>
<ul>...</ul>
</footer>
</body>
</html>
You could say in your CSS:
header ul, footer ul, nav ul { list-style-type: none; }
If you're using HTML 4, assign IDs to your DIVs (instead of using the new fancy-pants elements) and change this to:
#header ul, #footer ul, #nav ul { list-style-type: none; }
If you're using a CSS reset stylesheet (like Eric Meyer's), you would actually have to give the list style back, since the reset removes the list style from all lists.
#content ul { list-style-type: disc; margin-left: 1.5em; }
I combined some of Flavio's answer to this small solution.
.hidden-ul-bullets li {
list-style: none;
}
.hidden-ul-bullets ul {
margin-left: 0.25em; // for my purpose, a little indentation is wished
}
The decision about bullets is made at an enclosing element, typically a div. The drawback (or todo) of my solution is that the liststyle removal also applies to ordered lists.
You need to define a class for the bullets you want to hide. For examples
.no-bullets {
list-style-type: none;
}
Then apply it to the list you want hidden bullets:
<ul class="no-bullets">
All other lists (without a specific class) will show the bulltets as usual.
You can style li elements differently based on their class, their id or their ancestor elements:
li { /* styles all li elements*/
list-style-type: none;
}
#ParentListID li { /* styles the li elements that have an ancestor element
of id="ParentListID" */
list-style-type: bullet;
}
li.className { /* styles li elements of class="className" */
list-style-type: bullet;
}
Or, to use the ancestor elements:
#navigationContainerID li { /* specifically styles the li elements with an ancestor of
id="navigationContainerID" */
list-style-type: none;
}
li { /* then styles all other li elements that don't have that ancestor element */
list-style-type: bullet;
}
You can also define a class for the bullets you want to show, so in the CSS:
ul {list-style:none; list-style-type:none; list-style-image:none;}
And in the HTML you just define which lists to show:
<ul style="list-style:disc;">
Or you alternatively define a CSS class:
.show-list {list-style:disc;}
Then apply it to the list you want to show:
<ul class="show-list">
All other lists won't show the bullets...
Source: Stackoverflow.com