Coloring list items css

CSS Change List Item Background Color with Class

I am trying to change the background color of one list item while there is another background color for other list items. This is what I have:

What this produces is all list items with a blue background (from the «nav» class), as if there were no «selected» class. However, when I take out the background color from the «nav» class, I get the red background for the list item with the «selected» class. I would like to use the «selected» class for other items on the page (i.e. other list items, divs, etc.). How would I go about solving this? Thank you in advance.

5 Answers 5

This is an issue of selector specificity. (The selector .selected is less specific than ul.nav li .)

To fix, use as much specificity in the overriding rule as in the original:

ul.nav li < background-color:blue; >ul.nav li.selected

You might also consider nixing the ul , unless there will be other .nav s. So:

That’s a bit cleaner, less typing, and fewer bits.

Thank you! Again, I didn’t know about specificity. Does this mean I cannot have one class to affect all sub elements if I had declared a style for those elements?

I just found that «!important» from the above answer to do this. Is there a disadvantage to using «!important»?

There are tradeoffs. !important is a tool of last resort: it’s easy to overuse, and while simple at first it ends up complicating your code in the long run. The general rule is that if you don’t have to use !important (and you generally don’t), then don’t. Even then, you’ll want to keep an eye on specificity because !important can be overridden. It’s just usually less clear when it will be (one of the reasons to prefer selector specificity).

Thank you, D_N. Point taken about using «!important.» I ended up removing ‘.nav’ from ‘.nav li’, and now it’s behaving as I want it: to have ‘.selected’ a class selectable by all elements on the «current» page.

The ul.nav li is more restrictive and so takes precedence, try this:

I tried to add a class .active into the list item using jQuery but it was not working

.active < background-color: #480048; >$("nav li a").click(function () < $(this).parent().addClass("active"); $(this).parent().siblings().removeClass("active"); >); 

If you want this to be highlighted depending upon the page your user is on then do this:

To auto-highlight your current navigation, first label your body tags with an ID or class that matches the section of the site (usually a directory) that the page is in.

We label all files in the «/about/» directory with the «ab» class. Note that we use a class here to label the body tags. We found that using an ID in the body did not work consistently in some older browsers. Next we label our menu items so we can target them individually thus:

Note that we use the «b»utton class to label menu items as buttons and an ID («ab») to label each unique menu item (in this case about). Now all we need is a CSS selector that matches up the body label with the appropriate menu label like this:

body.ab #n #ab, body.ab #n #ab a

This code effectively highlights the «About» menu item and makes it appear dark gray. When you label the rest of the site and menu items, you’ll end up with a grouped selector that looks something like this:

body.hm #n #hm, body.hm #n #hm a, body.sm #n #sm, body.sm #n #sm a, body.is #n #is, body.is #n #is a, body.ab #n #ab, body.ab #n #ab a, body.ct #n #ct, body.ct #n #ct a

For example when the user navigates to the sitemap section the .sm classed body tag matches the #sm menu option and triggers the CSS highlight of the «Sitemap» in the navigation bar.

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

Web Style Sheets CSS tips & tricks

Ever wanted to make a list with the bullets a different color than the text, like in this example?

We will also assume that you don’t want to, or cannot, change the HTML markup. (See the note below.)

Some day, the ‘::marker’ selector may graduate from proposal to standard and you’ll be able to simply say ‘::marker ‘. But for now you can simulate the effect by combining a handful of properties.

You can make an image and use that: ‘list-style: url(mybullet.png)’. That gives you full control over the color and shape of the bullet. But if you want a bigger or smaller font size, you’d have to make a new image. Ditto if you want a different color.

So we’d rather use text that we can style, in particular a bullet such as • or ◦ or ▪. We need to replace the list item’s marker, which we cannot select, by a bullet that we generate and style ourselves. For that we suppress the list style and use ‘::before’ to add our own bullet. First suppress the list style:

Then generate our own bullet:

That inserts a red bullet, but not in the same place as the original bullet. We need to move it to the left, but without moving the text of the list item after it. One way to do that is to make our bullet into an ‘inline-block’ of a given size, say 1em, and then move it to the left by its own size:

li::before display: inline-block; width: 1em; margin-left: -1em>

B.t.w., if you have trouble typing those bullets into your style sheets, you can also use their Unicode numbers: • = «\2022″ , ◦ = \25E6» and ▪ = «\25AA»

Colored list numbers

What about numbered lists? The idea is the same: we have to replace the automatic counter that we cannot style by one that we generate ourselves. Apart from the properties above, we also need to create a counter. Say we use a counter called ‘li’. We first set it to zero on the OL element:

And then we use it like we did the bullet above:

One more thing is missing: As it is our own counter, we’re responsible for augmenting it as well:

The result looks like this:

That may be enough, but if you have more than nine items, it looks like this:

1. First item
2. Second item
3. Third item
4. Fourth item
5. Fifth item
6. Sixth item
7. Seventh item
8. Eighth item
9. Ninth item
10. Tenth item

while you’d probably prefer this:

1. First item
2. Second item
3. Third item
4. Fourth item
5. Fifth item
6. Sixth item
7. Seventh item
8. Eighth item
9. Ninth item
10. Tenth item

That requires four changes: moving the numbers a bit further to the left and adding that extra amount as margin on the right, right-aligning the list numbers, and setting the direction of the text to ‘rtl’. Why the ‘rtl’? I’ll explain below.

We put the numbers in a box that is 1em wide and align them to the right. But if the numbers are wider than the box, they will not be right aligned, but left aligned. Text is not allowed to overflow a box on the left side in CSS… unless it is text in a right-to-left language, such as a Hebrew or Arabic. The numbers aren’t Hebrew or Arabic letters and so they don’t actually go right to left, but by saying our box follows the rules for right-to-left text, we allow the numbers to overflow on the left and thus remain correctly aligned on the right.

(If you don’t want to add the ‘direction: rtl’, you can omit it and instead use a larger width and left margin, e.g., ‘width: 2em; margin-left: -2.5em’. That should provide enough space for correctly aligning numbers up to 999.)

Note on changing the markup

The difficulty of changing the style of the list bullet lies in the fact that both the bullet and the text are in the same element (the LI). If we could put them in different elements, the style rules might become simpler.

I recommend trying to style a document without changing it. The document has a structure that reflects its meaning and you don’t want to touch that. You may also have multiple styles for the same document. And sometimes the markup is generated by a system over which you have no control.

Site navigation

Bert Bos, style activity lead
Copyright © 1994–2022 W3C ® Privacy policy

Created 17 January 2001;
Last updated Thu 10 Feb 2022 05:40:52 AM UTC

Источник

How to assign different colors to each list item in an HTML unordered list?

But this change the color of all bullets. I want to assign different colors to each bullet. Can I somehow apply n-th child function for that?

5 Answers 5

li:before < content: "• "; padding-right: 5px; color: green; >li:nth-child(1):before < color: green; >li:nth-child(2):before < color: red; >li:nth-child(3):before

Or You could have a different background color for each list item,

body < background-color: #151515; >@font-face < font-family: 'Cuprum'; font-style: normal; font-weight: 400; src: local('Cuprum'), local('Cuprum-Regular'), url(http://themes.googleusercontent.com/static/fonts/cuprum/v4/sp1_LTSOMWWV0K5VTuZzvQ.woff) format('woff'); >nav ul < position: fixed; top: 50%; margin-top: -80px; width: 120px; >nav a < display: block; font: normal 1.2em/1em 'Cuprum', Candara, "Gill Sans", "Gill Sans MT", Calibri, sans-serif; text-transform: uppercase; color: #FFF; padding: 12px 0; text-decoration: none >nav li:nth-child(1) a < background: #2b5fd6; >nav li:nth-child(2) a < background: red; >nav li:nth-child(3) a < background: green; >nav li:nth-child(4) a < background: purple; >nav a img

Or you could use something called FontAwesome it replaces the bullets with images/icons. That’s if you want your bullets to be fancy. LINK

https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css 

ul, li < padding: 0; margin: 0; list-style: none; >ul < margin: 2em 0; >li < margin: 1em; margin-left: 3em; >li:before < content: '\f012'; font-family: 'FontAwesome'; float: left; margin-left: -1.5em; color: #0074D9; >.link

Источник