-1

I have this class in my css file

*{margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box;}

It looks like this class * puts every thing at margin 0 and padding 0. This class overwriten bootstrap OL and UL list.

How do I not inherit that * class for my OL and UL list from Bootstrap?

This is what the * does to my OL and UL listing. Unindented enter image description here

Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
delphiman
  • 65
  • 2
  • 11
  • Can you include your HTML and `OL` `UL` CSS? In general `*{}` only specifies default styles but any styles you apply to classes assigned to `ul` `ol` should no be overwritten. – Nope Mar 27 '17 at 16:04
  • My code is simple like this `
    1. 41ft-128ft 4-sect. full power megaform boom
    2. 4-sheave main boom nose
    3. Aux. single sheave boom nose

    LMI/A2B pat datalogger LMI light bar

    Compu-Crane selection

    • LMI Calib. for 2 x 20ft lattice inserts
    • 33ft-56ft manual offset bi-fold swingaway
    • HP30-19G grooved drum main & aux. hoists
    `     – delphiman Mar 27 '17 at 16:08

2 Answers2

1

You can use the :not() pseudo selector.

*:not(ul):not(ol) {margin:0;padding:0;box-sizing:border-box;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<p>paragraph</p>
<h1>heading</h1>
<ul>
  <li>ul</li>
</ul>
<ol>
  <li>ol</li>
</ol>

You could also introduce a class that specifies your padding/margin, and use that on elements you want to apply it to.

* {margin:0;padding:0;box-sizing:border-box;}

.pad {
  padding-left: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<p>paragraph</p>
<h1>heading</h1>
<ul class="pad">
  <li>ul</li>
</ul>
<ol class="pad">
  <li>ol</li>
</ol>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • If I do like this, does it affect other areas that needs to use * class? Some other areas in my page still need to use * for OL and UL. – delphiman Mar 27 '17 at 16:09
  • @delphiman \* applies to every element on the page. If you make a change to \*, it affects all elements. If you selectively want to modify the padding or margin for *certain* elements, use a specific class that overrides the stuff in \*. I gave an example like that in my answer with the `.pad` class – Michael Coker Mar 27 '17 at 16:13
0

somewhere below the * {}, just re-add the styles you removed

.my-list { padding: 10px; }

There is no real good reason to use * to begin with. If you want a global reset, just chain the elements together that you want reset and apply to those.

other discussions about this: What does a star-preceded property mean in CSS?

Community
  • 1
  • 1
Saucy
  • 26
  • 2