Question

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;
}
Was it helpful?

Solution

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).

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top