What is the best way to override a custom class-li element within another class-li?

I've just started learning HTML5 and CSS3, and I've encountered a challenge:

Here is the code I have written so far:

.custom-list ol {
  counter-reset: item;
  padding-left: 10px;
}

.custom-list li {
  display: block;
}

.custom-list li::before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.custom-list-2 ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 40px;
}

.custom-list-2 li::before {
  content: "# " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

.custom-list-3 ul {
  list-style-type: none;
  padding-left: 40px;
}

.custom-list-3 li::before {
  list-style-type: circle;
}
<div class="custom-list">
  <div class="custom-list-3">
    <ul>
      <li>TEST 1</li>
      <li>TEST 2</li>
      <li>TEST 3</li>
    </ul>
  </div>
</div>

This is the output I am getting:

https://i.sstatic.net/7vP7T.png

And this is the desired outcome:

https://i.sstatic.net/Ewbms.png

How can I achieve this?

Update: 1

https://i.sstatic.net/Jm6cV.png

Here lies the issue... I want the numbers 1.6, 1.7, and 1.8 to disappear and only use the current <ul></ul> structure.

Update 2

Thanks to @sol's solution, I'm close to the desired result!

https://i.sstatic.net/s7I4O.png

Now, I just need to remove the dot before the text 1.5.

csshtml

Answer №1

If you still wish to maintain the styles for .custom-list-3 for other uses, you can overwrite it as needed with the following code:

.custom-list li {
  display: list-item;
  list-style-type: disc;
}

.custom-list-3 li::before {
  content: '';
}


.custom-list ol {
  counter-reset: item;
  padding-left: 10px;
}

.custom-list li {
  display: block;
}

.custom-list li::before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.custom-list-2 ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 40px;
}

.custom-list-2 li::before {
  content: "# " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}

.custom-list-3 ul {
  list-style-type: none;
  padding-left: 40px;
}

.custom-list-3 li::before {
  list-style-type: circle;
}

.custom-list li {
  display: list-item;
  list-style-type: disc;
}

.custom-list-3 li::before {
  content: '';
}
<div class="custom-list">
  <div class="custom-list-3">
    <ul>
      <li>TEST 1</li>
      <li>TEST 2</li>
      <li>TEST 3</li>
    </ul>
  </div>
</div>

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

The Microsoft Booking feature is not being shown in the iframe

https://i.sstatic.net/QYNGI.png Instead of the booking website, this is what is being displayed. Below is the code snippet: index.js import React from 'react' const Appointment = () => { return ( <iframe src='https://outlook ...

htmlcssreactjsiframe

Avoid showing an image when it is outside the div container

Within a single div, I have an assortment of images that are dynamically repositioned using JQuery. $("#"+carElem).css({"left": pos.left+50 +"px"}); I am currently utilizing absolute positioning (although relative positioning yields the same outcome). Is ...

javascriptjquerycss

Button that floats on the left or right side within a div container

Is there a way to ensure that a button floats only within a specific div area? Below is the CSS and HTML example for reference. .test { width: 60%; display: inline; overflow: auto; white-space: nowrap; margin: 0px auto; } <div class=' ...

csshtml

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

javascriptjqueryhtmlajaxbootstrap-4

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Tips for enabling a flexbox item to extend beyond its container

While attempting to utilize flexbox for creating a navbar with the logo in the center, I encountered an issue where the logo wasn't able to overflow from above and below the navbar. I experimented with squeezing in and positioning the element, but it ...

htmlcsssassvuetify.js

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

htmlcssangular

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

What is the best way to calculate the total duration (hh:mm) of all TR elements using jQuery?

I currently have 3 input fields. The first input field contains the start time, the second input field contains the end time, and the third input field contains the duration between the start and end times in HH:mm format. My goal is to sum up all the dur ...

javascripthtml

How are the plugins configured for `postcss-import` implemented?

Recently, I've transitioned to using PostCSS exclusively with Webpack. As I explore the functionalities of using postcss-import to inline external stylesheets, I'm noticing that its options offer the ability to configure plugins and transformers ...

csswebpackpostcss

Caution: It is important for each child within a list to have a distinct "key" prop when using react-input

I'm currently facing an issue with the following code snippet: {array.map((item) => ( <> <input key={item.id} type="checkbox" /> ...

javascripthtmlreactjs

I am interested in utilizing css to establish an iframe as a background

Hello fellow programmers on stackoverflow, I am curious if it is feasible to utilize an iframe as a background using CSS? Allow me to elaborate: Currently, I have a div named "lead" on my website. Whenever this div is used in my HTML files, the image ...

jqueryhtmlcssiframe

Applying Bootstrap classes to adjust font weight

Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Contrasts between space and the greater than selector

Can you explain the distinction between selector 6 and selector 7 as outlined on the w3 website? Inquiring minds want to know. ...

htmlcss

Specifying Size of Icons in HTML and CSS

Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two. https://i.sstatic.net/JtIov.png This snippet demonstrates the HTML code related to this section: < ...

htmlcss

Tips for retrieving text without a class or id using selenium and python

I am attempting to extract a list of variables (date, size, medium, etc.) from the following webpage using python/selenium: Getting the titles was straightforward with: titles = driver.find_elements_by_class_name("sln_lot_show") for title in titles ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Validating Color Properties with CSS 3.0

When using Visual Studio 2012 (Ultimate), a red squiggly may appear indicating that rgba(255, 255, 255, 0.4) is not a valid color property value However, according to the W3C, it is considered a valid value. Could this be a bug in Visual Studio, or am ...

cssvisual-studiow3cw3c-validation

Use CSS to activate a sibling div when hovering over a button within the same div that contains the button

Is it possible to change the color of div #panel when hovering over the button #button inside div #left? #left #button:hover~#panel { background-color: blue; } #panel { position: absolute; float: r ...

htmlcss

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js