What is the best way to customize bullets for individual items (li) in an HTML list (ol/ul)?

In my design, I want list items with the "ok" class to show a check mark and those with the "ko" class to display a cross mark.

For testing purposes in this example, thumbs up icons are set as default:

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>

Any insights on what might be missing for this to function properly?

htmlcss

Answer №1

Revise your CSS code to target .ok and .ko classes differently. Instead of .ok li:before, use li.ok:before.

The selector li.ok searches for all elements with the tag li and the class ok.

On the other hand, .ok li looks for all elements with the class ok and any li elements within it.

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

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

Answer №2

The CSS classes "ok" and "ko" are associated with the list items (lis) and should be placed after the "li" element in the CSS.

Here is a functional 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>

Answer №3

The css selector you are using for li with the classes is not accurate. For more information, check out this resource

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Improve the parallax effect in your React component

Do you have any tips on smoothing out the scrolling animation for a React component with a simple parallax effect? I tried using requestAnimationFrame() in vanilla JS, but it doesn't seem to work well within the React component's rendering cycle. ...

javascriptcssreactjs

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

javascriptcssreactjsmaterial-ui

Issues with PHP Mail Forms not functioning as intended

I've been struggling for hours trying to figure this out. I'm new to PHP mail form coding and any assistance would be greatly appreciated! Below are two images: one of the HTML code and one of the PHP code. It seems like a simple setup, but even ...

phphtmlformsemail

Submitting the form does not result in the textbox being cleared

I have been attempting to clear the txtSubTotal text box upon clicking the PROCEED button, but it seems that my efforts have been in vain despite trying various code examples, including those from SO. btnProceed/HTML <input type="submit" name="btnProc ...

javascriptphphtml

How can you use jQuery to display an image when hovering over text?

Looking for a tutorial or script that displays an image when hovering over HTML text with the mouse? ...

javascriptjqueryhtml

The Impact of Using Custom HTML Tags with AngularJS Directives

If I were to create a unique avatarDirective in AngularJS that is connected to an userEmail property on the scope. The directive would update this HTML … <avatarDirective userEmail="user.email" /> with a standard img tag that has its src attribut ...

htmlangularjsangularjs-directive

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

javascriptjqueryhtmlcsshtml-table

Steps for deactivating a textbox upon checkbox activation

When I try to implement the instructions from the textbook, I'm encountering an issue where clicking on the checkbox doesn't disable the textbox on my website. <form action="#"> Billing Address same as Shipping Address: <input ...

javascriptjqueryhtml

Splitting hyphenations

Check out my Codepen project I'm attempting to prevent word-breaks inside my .threadTitle class by using display: inline-block. While this solution works, the addition of a hyphen between two letters still causes a break. https://i.sstatic.net/q6ZMk ...

htmlcss

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

Incorporate ng-click as an attribute in AngularJS

Is there a way to include ng-click as an attribute? For example, imagine I want to add ng-click if my <li> has the class someClass: angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'}); ...

javascriptjqueryhtmlangularjs

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

javascriptjquerycss

Is it feasible to block indent the second line of a URL?

Is there a way to indent a second line of a URL so that it aligns perfectly with the first letter of the sentence? I attempted using <ul>, but encountered issues as it inherited small text and bullet points from the main .css file. Check out this li ...

css

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

htmlcssbootstrap-5

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

html carousel not updating in popover

I've been attempting to create a popover with a bootstrap carousel, where the carousel items are dynamically generated and appended from a script. Despite my efforts, I have successfully displayed the carousel but struggle to append the items. I' ...

javascripthtmljquerycarouselbootstrap-5

Steps to achieve overflowing text above the border-top just like with the border-bottom when setting the height to 0px

Can text be vertically aligned above the border-top in HTML when using height:0px, similar to how it can be done below the border-bottom? HTML: <ul id="experiment" style="background: #FFDD00;"> <li id="test1"><span class="v-align-bot"& ...

htmlcssmenualignmentborder

Avoid changing the styling of the parent element when hovering over it

I am working on a comment box that allows for nested comments and is structured in the following way: <article class="comment"> Level 1 comment <article class="comment"> Level 2 comment </article> <article class="comment"& ...

htmlcss

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml

Explore Site Configuration

When it comes to creating a responsive site with the given layouts: https://i.sstatic.net/esdpU.png https://i.sstatic.net/5Rdlr.png If you have a fixed header (4rem), how can you set up the main container (C & D) to have a maximum height of 100% and scr ...

htmlcssbootstrap-4