Embedding a styled list item within a list

How can I customize the style of list items within a list?

HTML code

<span class=bbb>
<ul>
    <li>Preparing archive inquiries about study periods or work experience at LLU:
        <ul>
            <li>Within seven days - 5.69 EUR / 4.00 LVL</li>
            <li>Within one day - 8.54 EUR / 6.00 LVL</li>
        </ul>
    </li>
    <li>Preparing academic inquiries within seven days (information about the study program, credit points, subjects):
        <ul>
            <li>If the inquiry is needed for the first two courses - 5.69 EUR / 4.00 LVL</li>
            <li>If the inquiry is needed for all courses starting from the third - 9.96 EUR / 7.00 LVL</li>
        </ul>
    </li>
    <li>Preparing academic inquiries by printing from the LLU IS program - 2.85 EUR / 2.00 LVL</li>
</ul>

CSS code

.bbb ul{
list-style-image: url('2.png');
}
.bbb li{
 list-style-image: url('1.png');
}

Although all bullets currently have the same image, I would like each list item (li) to have a different bullet type than the unordered list (ul).

Answer №1

To improve your CSS selector, you need to provide more specific details. .bbb li will target all li elements within a ul, regardless of their hierarchy level.

For a more precise selection, consider using .bbb ul li ul li (highly specific - .bbb ul li or .bbb li li would also work with less precision). This will allow you to specifically target the nested li elements for styling.

Answer №2

It's important to remember that the list-style-item should be applied to the <ul> tags, not the <li> tags. If you want different bullet types for different levels of nesting, consider assigning each <ul> a class. You could also use something like span.bbb > ul to select only immediate children, but this is not typically recommended.

For more information, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

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

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group? <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" c ...

The HTML file that was downloaded appears to contain jumbled and nonsensical text

I recently downloaded some HTML files from an Android application. They display perfectly when opened within the app, but appear jumbled on my computer. There is also a CSS file included. If necessary, I can provide the CSS file for reference. While I am n ...

Modify CSS using Javascript by targeting the class of ".modalDialog > div {}"

I am currently working on a project that involves creating a Modal Layer using CSS. I have successfully implemented the modal layer, but now I need to figure out how to change the width from the default 400px to something else when I open it with Javascrip ...

The carousel top position in Bootstrap 4 is not functioning properly

I am struggling to get the teal rectangle to move to the top of the carousel. I have set my carousel to have a position relative and my teal rectangle to have a position absolute with top="0", but it doesn't seem to be working properly. Instead of mov ...

Reserved space for both double and single quotation marks

I've created a function that generates a table of specified size with predetermined content in each cell, and displays it within a designated div ID. generate_table(4, 4, 'Cell Content', 'display') To test this function, I added a ...

Custom field data in WordPress

I'm having difficulty formatting the prices of certain products using a custom field (unit_price). The value is 3.2, but the code only displays 3 because it doesn't recognize commas or dots. Is there a way to display the full value? any assistanc ...

How may I utilize CSS to generate a dynamically resizing rotated triangle that adjusts based on the text content?

Looking to add a dynamic badge in the top left corner of a div that adjusts its size based on the text content. Check out this example: http://jsfiddle.net/sbick/npxaasht/ <article> <div class="triangle"> <span>NEW</span ...

Discover the visibility of an element through monitoring DOM manipulation with Selenium

Is it possible to monitor a webpage for events such as when an element becomes visible? Can this be achieved using Selenium? For instance, if I set a timeframe to watch a webpage from startTime to endTime, various page events could be recorded, including ...

Can you explain how to incorporate a node module script into a React.js project?

I have encountered an issue where the element works perfectly fine when using an external node module, but fails to function properly when using a locally downloaded node module. Unfortunately, I am unable to identify the root cause of this problem. You c ...

show an HTML webpage within a <div> container using AJAX technology

I am trying to include an HTML page named Introduction.html (located in the same folder as x.html) within div1. However, it does not seem to be loading properly. Below is a snippet of the code from x.html x.html <!DOCTYPE html> <h ...

What is the best way to expand the width of my Bootstrap 4 navbar dropdown menu?

Need help creating a full-width dropdown for a Bootstrap 4 navbar using the standard boot4 Navbar? Check out the navbar template I am currently working with. Here is an example of how I want it to look: Desired design image link <nav class="navbar fix ...

Is it possible to resize a Div using pure CSS?

Here is the HTML structure I am working with: <div class="outer"> <div class="inner"> <a href="#"/> <a href="#"/> <a href="#"/> </div> </div> This is the corresponding CSS: div.outer{ position:relative; ...

Encountered an unexpected "<" error while using Ajax with MySQL

I am trying to accomplish a simple task - retrieve a table from a MySQL database. Previously, I was using basic MySQL code and it was working fine. However, after switching to MySQLi, I encountered an error: Uncaught SyntaxError: Unexpected token < ...

Is Javascript necessary for submitting a form to a PHP script?

In my current project, I am working on a page to edit information in a database. While I know how to create the form in HTML and the PHP script that runs on the server, I am facing a challenge with JavaScript. My understanding of JavaScript is limited, and ...

I am creating accordion-style bootstrap tables using data generated from an ng-repeat loop, all without the use of ui.bootstrap or jquery

My attempt at creating a table with rows filled using ng-repeat is not working as expected. I want a collapsible panel (accordion) to appear on click of each row, but only a single row is rendering with my current code. Here is a link to my code: var ap ...

The autosearch feature seems to be malfunctioning

I am currently working on implementing an autocomplete suggestion feature using the AutoComplete plugin from GitHub. I am using a combination of HTML, JavaScript, and CSS for this project. The functionality works perfectly when I hardcode the data in the f ...

Leveraging a Keyframes Definition from an External Source

Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin. Instead of creating a new animation ...

Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu? This is my HTML: <div class="shoplink"><a>Online Shop</a></div> <div id="shop-men ...

The unhandled type error rises with each scroll I make

Having been diligently working on my current website project, I encountered a puzzling issue. Upon writing code to implement smooth scrolling throughout the site, I found myself facing a persistent error that continues to escalate with each scroll up or do ...

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...