ol bullet types and text css

Question

I have an ol with this css:

ol {
  list-style-type: upper-roman;
  color: red;
}

My question is this...my li and any text within will be red.

<li>Some Text</li>

if I do:

<li><span>Some Text</span></li>

Its no problem I can manipulate span as I wish, But... is there a css way to alter the text color without encompassing in a separate element?

Your advice is appreciated :)

The question you've link is for ul....I'm using an ol with list-style-type and said solution do not yield the desired result. — Avi E. Koenig, Jun 14 '18 at 15:41
You haven't really explained what your desired result is and have not replied to my comment - if you are only wanting to change the text colour and not the roman numerals too then no there is no other way than to wrap the text in another element — Pete, Jun 14 '18 at 15:42
if it were normal numbers and not roman numerals, you could use a pseduo element and css counters — Pete, Jun 14 '18 at 15:47
@Pete please consider removing your duplicate flag. And see the answer I marked. — Avi E. Koenig, Jun 14 '18 at 16:51

score 1 · Accepted Answer · answered Jun 14 '18 at 16:09

1

You can use counters like following

ol {
  counter-reset: section;
  list-style: none;
}

li::before {
  color: red;
  content: counter(section, upper-roman);
  margin-right: 5px;
}

li {
  counter-increment: section;
}

<ol>
  <li>Some text</li>
  <li>Some text</li>
</ol>

answered Jun 14 '18 at 16:09

Nikhil Aggarwal

28,197
4
43
59

@AviE.Koenig - Welcome mate :) – Nikhil Aggarwal Jun 14 '18 at 16:51

score 0 · Answer 2 · answered Jun 14 '18 at 15:15

Yes, you can use various psuedo selectors to target different LI's specifically, such as, either based on numerical order, order rules or specifically if they are first or last.

// Target the 2nd list item
ol li:nth-child(2) {
color: blue;
}

// Target every 3rd item and the 1st item
ol li:nth-child(3n+1) {
color: blue;
}

// Target only the first list item
ol li:first-child {
color: green;
}

// Target only the last list item
ol li:last-child {
color: purple;
}

ol bullet types and text css

2 Answers2