I have an imported set of CSS styles. One of those styles is the list-style-type: none; that you can see in the screen-shot.
I'm implementing a component right now where I need numbered list items for an <ol>. No big deal, I just write a CSS style that's more specific than the imported style, right?
Except for some reason, even though the imported style is overridden, it's still effecting the list when I load the page! Once I disable it in dev-tools, the numbers appear just how I want them, but dev-tools shows that the imported style is crossed out and shouldn't have any effect in the first place.
How is it, that a CSS style that's clearly being overridden is still somehow effecting the element it's targeting?
Any ideas or insights would be very much appreciated. Thanks!
The style which sets list-style-type: none is applied to ol elements and li elements.
You are overriding it with a more specific selector for the ol element, but the li element has its defaults overridden so doesn't inherit from the parent ol.
This example shows how that works:
ul,
li {
list-style-type: none;
}
ul {
list-style-type: number;
}
.b {
list-style-type: inherit;
}
<ul class=list>
<li>aaa
<li class="b">bbb
</ul>
Related
I have a horizontal menu built using a <ul> element. I'm trying to get it to evenly spread out each <li> across the width of the menu. Based on several answers here on SO, I used the following CSS:
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
However, no matter what I try, the <li> elements still end up with a calculated display of block, with this contradictory information from the debugger (tested in FF and Chrome):
I didn't know what is going on here, and (more importantly) how do I get my list items to display as table-cell?
In photo is showed that your style.css is really big (min.1835 lines) and because of that styles to ul could be overvritten somewhere.
To make your rule more important than existing rule, use !important keyword after rule like so:
ul {
display: table!important;
width: 100%!important;
}
ul li {
display: table-cell!important;
}
CSS has a trait called importance, it chooses which rules are the most specific and thus should override more loose rules. As you seem to use a CSS framework, your own rules don't override the framework's generic rules. Turns out that you have two options to increase the importance of your rules at main.css:
Add !important after your rules:
ul li {
display: table cell !important;
}
Make your selectors more specific:
#menu ul li.menu-list-item { ... }
Your question also looks very strange and you may be subject to a browser rendering bug, have you tried it out with other browsers?
I have applied following styles on HTML list in my CSS file
list-style-image: none;
list-style-type: none;
But then, in a page I want to have items listed in an alphabetical order (means an OL list). But when I write the <ol type="a">...</ol> then items are not displayed in ordered-list manner, because I think the style set in CSS file through above mentioned properties affects it.
So can anyone tell what the problem really is and how to solve it. Is there any way to remove that CSS property (list-style-type: none;) so that the items are show in normal way.
You can apply the rule only to ul like this:
ul {
list-style-image: none;
list-style-type: none;
}
list-style-image and list-style-type have nothing to do with ordering alphabetically. These set the style of the list e.g. bullet and the image to use for the bullet. In regards to overriding the css this will work:
Give your ol a class and set it to whatever you wish.
<ol class="different-ol-style">...</ol>
.different-ol-style{
list-style-type:lower-alpha;
}
I am using a css reset, but ther is one list I want to have a list-style-type. How can I do this, the normalize is always reseting my styles.
js fiddel code
at the end of the css, I'm trying to style the list by class, but is does not work.
HTML
<ul class="disc">
<li>You can draw!</li>
<li>You can drag&drop Images!</li>
<li>You can add text labels!</li>
</ul>
css
.disc:li{
list-style-type: disc;
}
.disc:ul{
list-style-type: disc;
}
You need to restore the original padding as well for those markers to show. For example:
ul.disc {
list-style: disc;
padding-left: 40px;
}
Fiddle.
This rule will be applied independent of whether reset rules are applied above or below it, as it's more specific (element selector + class) than reset ones (which never have classes, only element selectors + attribute selectors).
You're using invalid CSS.
You should be using just the following:
ul.disc {
list-style: disc;
}
You need to override the reset. There is a mistake in your code. It should be either this
.disc li{
list-style-type: disc;
}
or this
.disc {
list-style-type: disc;
}
(You probably don't need both, but it depends on the reset.)
If the above doesn't work, then the rule needs to be more specific, such as adding a extra class or ID of the the container this list appears in.
I have a CSS problem on this page: http://www.fastclickad.com/ask-for-your-free-seo-analysis/
For some reason, bullets still show although I inserted in the style sheet several instructions so the list styles don't inherit from the theme.
When I "inspect element" with google Chrome everything seems to go smooth, except the bullets still show!
Can you help me?
You have a border specified which, if removed, prevents the arrow:
.aritclecontent ul li::before, .sidebarwidget ul li::before {
border-left: solid #0473B2;
}
So you'll need to do something like:
.gform_body ul li:before {
border-left:none!important;
}
The !important could be frowned upon, so you might wish to analyse your styles and refactor accordingly to remove the need for using it, if indeed it is necessary.
try this ..
list-style-type: none;
Is there a good reason to override CSS list-style on both <ul> and <li> or just <li>?
Per w3.org you can define list-style-type on any element with display:list-item.
As far as I know, in modern browsers you can set any element to display: list-item so that - if you wanted to - you could correctly use the list-style-type property on any of them.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>12084892</title>
<meta charset="utf-8">
<style>
div span {
display:list-item;
list-style-type: disc;
list-style-position: inside;
}
</style>
</head>
<body>
<div>
<span>One</span>
<span>Two</span>
</div>
</body>
</html>
Trivia tidbit aside, what behavior are you looking to get? If you want different list items in the same list to have different bullets, then you'll need to define the list-style-type on the lis themselves. If you want all the lis within a given ul to have the same bullet, it's up to you. I typically define this on the ul, however. It is more intuitive to do it that way for me, personally.
If you look at the CSS spec, you'll see that property is intended to style "elements with display: list-item".
The property is inherited if not explicitly defined on the <li> elements, so you should stick to applying the style to only <li> elements.
If it's the same one, no. Just define it on whatever's convenient to you; <li>s will inherit the <ul>'s list-style unless explicitly overridden.
Inheritance transfer the 'list-style' values from ol and ul elements to li elements.
so i think you should apply the style to only li elements.
Even if list style is getting inherited from UL/OL, you should define css list-style to li only. And You can create different list styles with each other in one list. For example:
ul.test li {
list-style:disc;
margin:0 0 0 20px;
}
ul li:first-child {
list-style:circle;
}
You should normally set list-style on ul and ol elements only, because this avoids unexpected and undesired problems caused by cascading rules. See description of `list-style in CSS 2.1 spec.
For example, ol li { list-style: upper-roman; } may look safe, but consider this:
<ol>
<li>foo
<ul>
<li>bar
</ul>
</ol>
Now the inner li element, with “bar” content, will have the list style applied to it, because it too matches the selector ol li. (It is true that using the selector ol > li would avoid this, but it has browser compatibility issues.)
Setting ol { list-style: upper-roman; } instead avoids the issue, since now the inner li does not match, and it inherits list-style from its parent, ul (which has a suitable setting in browser default style sheet).
However, you need to set list-type directly on an li if you want one particular list item be styled differently from other items in the same list. In such cases, you will normally use an id selector or other selector that matches that specific element only, not any inner li elements.