How to Style Unordered Lists in CSS as Comma Separated Text

How to style unordered lists in CSS as comma separated text

To remove the trailing comma, use the :last-child pseudo-class, like so:

#taglist li:last-child:after {
    content: "";
}

comma-delimited lists with CSS—I want an Oxford Comma!

I added this extra rule, it appears to do what you want:

#taglist li:nth-last-child(3) ~ li:nth-last-child(2):after {
  content: ", & ";
}

CSS: Horizontal, comma-separated list with fixed li width

...
ul li a {
 text-decoration: none; color: #666; 
 display: inline-block; 
 max-width: 50px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
ul li {
 margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 60px; /* 'X' */
}
...

My 2¢

apply diffrent css for text separated by comma inside div

This is what I would do:

$("[data-value]").each(function(){
  var words = $(this).text().split(",");
  $(this).text("");
  for(var i=0; i< words.length; i++){
    var r = Math.floor((Math.random() * 255) + 1);
    var g = Math.floor((Math.random() * 255) + 1);
    var b = Math.floor((Math.random() * 255) + 1);

    $(this).append("<span style='color:rgb("+r+","+g+","+b+")'>"+words[i]+ ((i< words.length-1) ? ",":"")+"</span>");
  }
}); 

Here is the JSFiddle demo

The code randomly generates colors and sets a different color for each word.

List of tags in HTML - plain comma separated list or ul with some css?

It depends on what you're trying to accomplish. If you just want to list the items, there's nothing wrong with your first method, just listing the text out. The reason to go the other route would be if you want to style each item, or for some other reason separate them for clicking, hovering, etc...

Demo with hover effect: http://jsfiddle.net/Jaybles/YKFH5/3/

Which CSS properties allow comma separated values?

You really just need to reference the property table.

Any css function, such as rgb(), takes its parameters as CSV (i.e. rgb(107, 203, 84))

In CSS2, the properties that might be separated via commas are:

• cursor – if you're using a custom <uri>
• font – see font-family
• font-family – separating each font-family value (i.e. Arial, sans-serif)
• voice-family – for listing <specific-voice> or <generic-voice> options.

Finding all the CSS3 properties that might allow CSV is a bit more challenging. CSS3 has been treated more as a set of modules to enhance CSS2 than a full blown spec to replace CSS2.

CSS backgrounds and Borders Module Level 3 allows the following properties to support CSV:

• background – multiple background rules are separated, due to this all background sub-properties may also use CSV
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-clip
• background-origin
• background-size

CSS Color Module Level 3 adds rgba(), hsl(), and hsla() for color functions, all of which take comma-separated parameters

CSS Text Level 3

• text-shadow

CSS Transitions Module Level 3

• transition – similar to background, multiple transitions are separated by ,, and all sub-properties also use CSV.
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

CSS Animations Module Level 3

• animation – see transition
• animation-delay
• animation-direction
• animation-duration
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

cubic-bezier() function

CSS Fonts Module Level 3

• font-feature-settings

character-variant(), styleset(),

CSS !important rule with list values

You need to place the !important at the end, prior to the closing semi-colon.

Note that it works to override the property value as a whole, not individual components of it- so it cannot be applied to the individual comma separated arguments (indeed, this would be a pointless exercise as you'd logically only then need a single argument, the one you are making important).

That said, note as per MDN, the use of !important is not recommended:

The !important exception

When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.

Some rules of thumb

1. Never use !important on site-wide css.

2. Only use !important on
   page-specific css that overrides site-wide or foreign css (from ExtJs
   or YUI for example).

3. Never use !important when you're writing a
   plugin/mashup.

4. Always look for a way to use specificity before even
   considering !important

Add selectable commas between multiple span items

You can use document.querySelectorAll to select all but the last .comma span, and then add a comma to their innerText:

spans = document.querySelectorAll('.comma:not(:last-of-type)')

spans.forEach(span => span.innerText = span.innerText + ', ')

<span class="comma">A</span>
<span class="comma">B</span>
<span class="comma">C</span>

---

Related Topics