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.
Related
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>
I have defined a CSS for my basic document layout:
div#content li {
font-size:95%;
list-style-image:url(/css/bullet_list.gif);
line-height:1.5;
}
deeper down in one document, I'm including a CSS file defining
.codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
but the list element still displays the bullet graphic (bullet_list.gif) as if it would override the list-style-image: none; definition. Does anyone know why?
URL of the HTML document in question: http://www.psychotherapiepraxis.at/artikel/trauma/traumatherapie.phtml , the code in question is at the "Bewertung" section close to the end - the rating stars are covered by the bullets.
Try setting near enough the same elements as the original definition but include the selector.
div#content .codexworld_rating_widget li{
list-style: none;
list-style-image: none;
float: left;
}
This should fix your problem.
You should apply list-style rules to UL(OL) tags and so far you are targeting LI(list item) tags
CSS specificity gives div#content li a value of 102 while .codexworld_rating_widget li gets a value of 11. You need to either add a parent with an ID to .codexworld_rating_widget li or remove the id from div#content li. This specificity calculator can be very handy.
I have a template I am modifying. It links to a stylesheet that the following code to manipulate unordered lists.
ul {
float: left;
margin: 0 40px 16px 0;
padding: 0;
list-style: none;
}
I have a separate style sheet that has the following:
.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}
In my HTML code I reference my class like this
<ul class="featured_list">
Can anyone please tell me why my list is still set to float left tag? Thanks for any help.
For this markup
<ul class="featured_list">
you should be selecting it as
ul.featured_list {
styles here
}
You want this:
ul.featured_list
That is a ul with the class featured_list. Your selector is for a ul contained within an element with class featured_list.
The issue is with the way you are writing your selector for unordered list as:
.featured_list ul{float:none; list-style:circle; list-style-position:inside;}
This will try to find all ul elements which are child elements of element with class featured_list. Instead of this you can directly use the class name to apply the style to the list as:
.featured_list {float:none; list-style:circle; list-style-position:inside;}
DEMO:
If you cannot change the CSS file, then you want to wrap the ul with .featured_list:
<div class="featured_list">
<ul>...</ul>
</div>
If you can change the stylesheet, then you need to change the styles to:
ul.featured_list {}
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;
}
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.