CODEWITHSUNDEEP
htmlcsscss-selectors
Graeme Wilkinson
Graeme Wilkinson

Reputation: 419

using the * selector in css, but exclude h1?

I have a jquery plugin, that annoyingly has this at the top of its stylesheet.

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

It's causing my h1 to behave differently on this page. Is there a way to exclude certain selectors from this? Otherwise I guess I have to work out what it's applying to and list everything rather than *?

Upvotes: 2

Views: 1343

Answers (5)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

I would simply suggest you to use selector just h1 which will override the all selector(*):

h1{
  box-sizing:content-box;
  margin: 5px;
  padding: 5px;
}

It's always better to use * selector for eg. as you may want to change #somecontent h1 but not h1 then just using #somecontent h1{...} would override the rule of * selector and even just h1 tag will be benefited from * selector.

A really nice idea would be to override * selector itself if you're not interested with the plugin css:

*{
  border-box: content-box;
  margin: 0; /*add your value as you wish*/
  padding: 0; /*add your value as you wish*/
}

And you may also update the h1:

h1{
  margin: 5px;
  padding: 5px;
}

But to consider this, you must make sure that your css file is at last line of the plugin css file.

<link rel="stylesheet" type="text/css" href="plugin.css" />
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- last in order--->

Upvotes: 7

Michael
Michael

Reputation: 7092

This is only a partial answer but I would suggest instead using inherit for box-sizing. You can then easily reset an entire section if needed. You end up with less code utilizing box-sizing: border-box; in this way. Resetting your H1 is obvious. Just reference it explicitly to bypass your universal selector.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

With this HTML:

<div class="content">
<h1>Some Heading</h1>
</div>

Reset it with this CSS:

.content { box-sizing: content-box; }

Upvotes: 0

RaphaelDDL
RaphaelDDL

Reputation: 4480

Well, quick answer is replace * for *:not(h1).

This looks like a simple attempt of a normalize. You could remove it and fix whatever is wrong on plugin's elements or simply fix your h1 to have the margin/padding it was supposed to have.

Upvotes: 8

Mike
Mike

Reputation: 894

modern browser solution

*:not(h1)
{
/* css code */
}

cross-browser compliant solution

h1{
box-sizing:none;
margin:auto;
padding:auto;
}

EDIT: removed superfluous !important flags.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

*:not(h1)
{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

Upvotes: 1

Related Questions