CSS and custom list tags

I have a few files I’ve been handed that have custom tags for lists. Basically instead of <ol>, <ul> and <li> they use list for both lists but with seperate attributes for each (no for a numbered list, dash for a bulleted list) and that means the closing tags on both are the same </list>. For each line it uses <item>. I could replace all the <item> with <li> but I rather not, and that doesn’t deal with the type of list. ANyone any ideas how I could achieve this via CSS? Many thanks.

What kind of files? html?
Please show a sample of the code you’re talking about.

Ah, yes, sorry. HTML yes. Sample idea below

<list type="bullet">
<item> text1</item>
<item>text2</item>
</list>

<list type="number">
<item> automatically numbered text</item>
<item> automatically numbered text2</item>
</list>

Think that about covers it but if there’s anything else you need let me know.

<list> is not valid HTML
Take what you’ve provided as a sample and put it into a codepen pen and you’ll see it does not render as any type of list.

There are three list elements you can use in HTML

  1. <ul><li>list item</li></ul> for an unordered list
  2. <ol><li>list item</li></ol> for an ordered list
  3. <dl><dt>display term</dt><dd>display description</dd></dl> for a description list

Now you can use styling to achieve something like you’re describing

<ul class="a">
  <li>item 1</li>
  <li>item 1</li>
</ul>

and use CSS

ul.a {
  list-style-type: circle;
}

to give an open circle. Or change “circle” to “square” and you’ll get square bullet points.
Something similar can be done with the ordered list using alpha or roman.
Better than me typing you can see more examples here.

Is it possible the file(s) you’ve been given are not HTML?

1 Like

You’re right enough to say it isn’t straight forward html. As far as I know they are custom tags (the file is full of them and I’ve managed to deal with most via CSS using ::after for instance). Going through the file and changing all the lists isn’t really an option so I’d hoped I could deal with the custom tags via CSS again.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.