CODEWITHSUNDEEP
htmlcss
Pierre
Pierre

Reputation: 155

How to put different bullets for different items (li) in html list (ol/ul)?

I would like li that have "ok" class to display a checked mark and li that have "ko" class to display a cross mark.

I am displaying thumbs up by default only for debug purpose in this example:

ol {
  padding-left: 30px;
  list-style: none;
}

li:before {
  margin-left: -20px;
  margin-right: 10px;
  content: '\1F44D';
}

.ok li:before {
  content: '\2714';
}

.ko li:before {
  content: '\274C';
}
<ol id="opponentsOfCivOL">
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ko">1</li>
  <li class="ok">1</li>
</ol>

What am I missing to make this work?

Upvotes: 1

Views: 975

Answers (3)

Real Quick
Real Quick

Reputation: 2800

Your css selector for li with the classes is incorrect. See more here

ol {
  padding-left: 30px;
  list-style: none;
}

li:before {
  margin-left: -20px;
  margin-right: 10px;
  content: '\1F44D';
}

li.ok:before {
  content: '\2714';
}

li.ko:before {
  content: '\274C';
}
<ol id="opponentsOfCivOL">
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ko">1</li>
  <li class="ok">1</li>
</ol>

Upvotes: 1

biberman
biberman

Reputation: 5767

The classes "ok" and "ko" belong to the lis and have to be in the the css after "li".

Working example:

ol {
    padding-left: 30px;
    list-style: none;
}

li:before {
    margin-left: -20px;
    margin-right: 10px;
    content: '\1F44D';
}

li.ok:before {
    content: '\2714';
}

li.ko:before {
    content: '\274C';
}
<ol id="opponentsOfCivOL">
    <li class="ok">1</li>
    <li class="ok">1</li>
    <li class="ok">1</li>
    <li class="ko">1</li>
    <li class="ok">1</li>
</ol>

Upvotes: 1

Zeeshan S.
Zeeshan S.

Reputation: 2091

Change your CSS for .ok and .ko. Instead of it being .ok li:before it should be li.ok:before.

li.ok is read as find all elements with tag li with class name ok.

Whereas .ok li is read as find all elements with class name ok and all elements with tagname li inside it.

li.ok:before {
  content: '\2714';
}

li.ko:before {
  content: '\274C';
}

Upvotes: 2

Related Questions