Start fresh with your list styling in Sass/CSS

Question

Start fresh with your list styling in Sass/CSS

I'm attempting to revert ul and li elements to their default styles using a specific class, but I'm encountering difficulties in doing so. I've experimented with the inherit and initial values, but they haven't proven effective.

This is my current approach:

ul, li {
    margin: 0;
    padding: 0;
}

What I aim to achieve is to create a class named .list-unset that resets the child DOM elements to browser defaults rather than inheriting margin: 0 and padding: 0.

I've made an attempt like this:

.list-unset {
    ul, li {
        margin: unset;
        padding: unset;
    }
}

Unfortunately, this approach didn't yield the desired results.

html css sass less stylesheet

Answer 1

Answer №1

To properly reset the styling of a <ul> element, the best practice is to use the inherit CSS property:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset, ul.unset > li {
  margin: inherit;
  padding: inherit;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

It's important to note that this inherited value comes from the parent element. Any styles applied to the parent will affect the target element. In the absence of specific rules, the default values will be used.

If resetting through inheritance doesn't work for your scenario, you can manually apply the default styles to the <ul> element with higher specificity:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset {
  margin-left: 16px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.unset > li {
  margin: 1px 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

To properly reset the styling of a <ul> element, the best practice is to use the inherit CSS property:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset, ul.unset > li {
  margin: inherit;
  padding: inherit;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

It's important to note that this inherited value comes from the parent element. Any styles applied to the parent will affect the target element. In the absence of specific rules, the default values will be used.

If resetting through inheritance doesn't work for your scenario, you can manually apply the default styles to the <ul> element with higher specificity:

ul, li {
  margin: 0;
  padding: 0;
}

ul.unset {
  margin-left: 16px;
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.unset > li {
  margin: 1px 0;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="unset">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Start fresh with your list styling in Sass/CSS

Answer №1

Similar questions

Lines running horizontally on either side of the text

Content in Bootstrap not filling entire mobile screen

Accessing the background page of a Chrome extension while it's in operation

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

What is the best way to showcase an image that is being retrieved from PHP using ajax?

Error: The locator I used with the ID getUserById did not find any elements

Concealing a Class on the Homepage in Joomla 3

JS Issue with Generating Content

Angular: Disabling a button based on an empty datepicker selection

Obtaining data from HTML tags using Beautifulsoup

Is it possible to link an HTML select element to a changing array in JavaScript?

Angular Material's <mat-select> tag allows for the inclusion of an <input> element within it

A combination table featuring both fixed and scrolling columns

Utilizing the CSS Top and Left attributes along with Jquery animations

Recording Node pathways that begin with the hash symbol #

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

Struggling to access a .html page using Selenium?

How to Determine If a String Represents an HTML Tag Using jQuery

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Issue with locating assets in Angular 6 build