CSS select first character in list item

Question

I have a page with about 10 lists, 5 are unordered and 5 are ordered. Rather than the generic disc or bullet/number or Roman numeral I've decided to make up a custom list marker. Each list item is as so...

<ul>
  <li>*List Item 1</li>
  <li>*List Item 2</li>
</ul>

<ol>
  <li>1List Item</li>
  <li>1List Item</li>
</ol>

What I need to do is select the initial character being 1, 2 or *. Without using span 100 times or separate stylings for ul and ol, is there a way to select the first character.

I have tried using spans but with that many lists and list items there becomes a lot of extra coding...I've also tried li::first-letter {...} This works for the ul, but for ol it results in e.g. "*L" from "*List Item".

I've read a little into ":before", this would probably be the next best thing but I'm hoping there's a selector to do all li's.

Thanks for any info.

EDIT: I have found the solution using a combination of ::first-letter and ::before, like so...

<ul>
  <li>List Item</li>
  <li>List Item</li>
</ul>

<ol>
  <li>1List Item 1</li>
  <li>2List Item 2</li>
</ol>

ol li::first-letter, ul li::before {
 ... // select's all ol and all ul list items
}

ul li::before {
  content: "*";
  ... // adds * as first letter for above
}

You have numbers in `unordered list` and what looks like custom icons in the `ordered list`. It's the wrong way around for starters. Have a look here https://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list shows how to make custom `ol`s. > Seems I've misunderstood the question :) — Gezzasa, Nov 20 '17 at 05:04
@Harley, as stated I've used span, but with hundreds of list items it becomes a lot of excess code to put a span on each one. — mrkd1991, Nov 20 '17 at 05:40
@Gezzasa, good catch! I'm writing this on my phone at work in my free time so there'll likely be a few more mistakes ha ha. Basically the first character of each list item will be wrapped in a border and styled, I want to be able to select numbers, letters and characters. — mrkd1991, Nov 20 '17 at 05:42

score 0 · Answer 1 · answered Nov 20 '17 at 05:19

I think Javascript would be best here.

  var liArray = document.getElementsByTagName('li').innerHTML;

  for(i=0;i<liArray.length;i++){
    var buildString = '<span class="customStyle">';
    buildString += liArray[i].subString(0,1);
    buildString += '</span>';
    buildString += liArray[i].subString(1);
    liArray[i].innerHTML = buildString;
  }

To quickly explain the code. We start off by selecting all the list elements in your document and saving them into an array called "liArray".

Then we loop through that array in a for loop applying our code to each element.

Then we build a "new" string that takes the first character of each list element and wraps it in a span tag with the class "customStyle".

That will let you apply any styling you want to only the first character of the li just by adding the class "customStyle" to your css document.

Yeah I figured js would be the go, just wondering with all the selectors and pseudo selectors if I can do it solely with css. — mrkd1991, Nov 20 '17 at 05:44

score 0 · Answer 2 · answered Nov 20 '17 at 05:24

0

 body ul li:nth-child(odd){
background-color: #f22cf2;
}

answered Nov 20 '17 at 05:24

Zabkas

67
9

Wouldn't that skip every 2nd list item? – mrkd1991 Nov 20 '17 at 05:44
Yes, u can use---> body ul li:nth-child(1n+0) {something:test;} – Zabkas Nov 20 '17 at 05:48
That select's the entire list item, rather than the first character of each list item. Though it's a handy thing to learn, so thanks. – mrkd1991 Nov 20 '17 at 09:48

score 0 · Answer 3 · answered Nov 20 '17 at 23:42

0

<!DOCTYPE html>
<html>
<head>
<style> 
ul li:nth-child(1) {
background: red;}

ol li:nth-child(1) {
background: red;}
</style>
</head>
<body>

<ul>
<li>*List Item 1</li>
<li>*List Item 2</li>
</ul>

<ol>
<li>1List Item</li>
<li>1List Item</li>
</ol>
</body>
</html>

answered Nov 20 '17 at 23:42

Zabkas

67
9

That still select's the entire list item, where I only want to grab the first character, either 1 in ol or * in ul. – mrkd1991 Nov 21 '17 at 07:11

CSS select first character in list item

3 Answers3