How to avoid CSS styles to be applied for particular element

Question

I am using <hr /> element in my HTML. In Bootstrap.css file they applied some styles to <hr /> tags. I don't want to apply those styles to one of my <hr /> tag. How can I do that?

But I need those styles for other hr elements, I just want to avoid it to perticular hr tag — user3191903
– user3191903, Commented Mar 5, 2014 at 8:06

Ankur Aggarwal · Accepted Answer · 2014-03-05 18:35:42Z

3

Suppose you have an id to the div enclosing the hr

<div id="hrDiv">
   <hr>
</div>

To remove style you can use removeAttr property over the selector

$("#hrDiv hr").removeAttr("style");

If you are not using inline style then you need to override the propeties in css

#hrVid hr
{
//oveeride property
}

You can also put id to hr tag directly

edited Mar 5, 2014 at 18:35

answered Mar 5, 2014 at 8:10

Ankur Aggarwal

3,0915 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

StuperUser Over a year ago

The style is applied via css from the stylesheet, not inline. The style attribute will be empty already.

Ankur Aggarwal Over a year ago

Then you can override the css properties using selector #hrDiv hr

StuperUser Over a year ago

Without knowing more about OP's markup, why put the id on the parent div and not the hr?

Ankur Aggarwal Over a year ago

You can also do that but i usually avoid it for good practice sake.

StuperUser Over a year ago

How is adding new markup better practice than applying a class to an element you actually want to style? It's just bloat that can break the structure of a page, I don't see any benefits.

Pat Dobson · Accepted Answer · 2014-03-05 08:07:17Z

1

Simply override the styles.

Say bootstrap applies:

hr{ border: 1px solid red; padding: 10px; }

In a stylesheet declared after bootstrap, override then like this:

hr{ border: none; padding: 0; }

Edited addition:

Based on the replies, if it's a particular HR tag (but not all), give the specific one a class:

<hr class="specialHr" />

And apply the style:

hr.specialHr{ border: none; padding: 0; }

answered Mar 5, 2014 at 8:07

Pat Dobson

3,2992 gold badges23 silver badges36 bronze badges

1 Comment

user3191903 Over a year ago

But I need those styles for other hr elements, I just want to avoid it to perticular hr tag

MarcelB. · Accepted Answer · 2014-03-05 08:08:14Z

1

You can set a class to your <hr/> and apply different styles to it. Or use the css :not() selector.

answered Mar 5, 2014 at 8:08

MarcelB.

211 bronze badge

Comments

Julien · Accepted Answer · 2014-03-05 08:09:23Z

1

You can't do that.

You have to override every CSS property explicitly.

You can also modify your css file to create a class (instead of applying the style to all tags). However, you must explicitly declare this class in each <hr> tag where you want to apply the style (inverted your problem)

answered Mar 5, 2014 at 8:09

Julien

3,54722 silver badges36 bronze badges

Comments

Mathias · Accepted Answer · 2014-03-05 08:37:42Z

I would suggest you edit the Bootstrap CSS so that you need to add a class in order to get the BootStrap styling e.g. <hr class="hr">

hr.hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

You can also create a class that specify the default styling to override Bootstrap. The default styling can differ from different browsers so I guess you need to decide which one to use. I took this from the user agent stylesheet in Chrome.

hr.hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}

If you take that and make a CSS style rule specifying the same appearance you could mimic the default styling for that browser.

Jakub Vrána · Accepted Answer · 2020-01-30 12:37:54Z

1

If this is something bigger than <hr> and you need to un-use many styles, you can put the contents in <iframe>.

answered Jan 30, 2020 at 12:37

Jakub Vrána

6936 silver badges16 bronze badges

Comments

Anusha kurra · Accepted Answer · 2014-03-05 08:11:34Z

0

at the end of your tag override with !important

example

<hr style="width:200px" !important>

this will overide with your changes

answered Mar 5, 2014 at 8:11

Anusha kurra

4803 silver badges9 bronze badges

1 Comment

StuperUser Over a year ago

Inline css is defined in markup (rather than js that animates for example) is considered quite bad practice (since it breaks separation of concerns). !important can also be easily abused, and this isn't a case to use it. Check out css-tricks.com/when-using-important-is-the-right-choice

Sbpro · Accepted Answer · 2014-03-05 08:20:44Z

0

There are few approaches... Give this particular < hr /> a class (or id) and add your styles in your css:

 <hr class="myspecialhr" />
<style>     
 .myspecialhr {height:5px;}
</style>

You could also add you style overrides inline with the element:

 <hr style ="height:5px;"/>

You could "tag" this < hr /> with the class or id of a parent item of that particular page.

 <div class ="page1">
  <hr />
 </div>
 <style>
  .page1 hr {height:5px;}
 </style>

Finally, you could use CSS borders to achieve your layout goals and replace the

in your pages.

answered Mar 5, 2014 at 8:20

Sbpro

98814 silver badges27 bronze badges

Comments

LostMyGlasses · Accepted Answer · 2020-01-30 12:48:17Z

0

Just create an individual style for the <hr> tag.

So for example, to make the <hr> 500 pixels wide use:

<hr style="width:500px;" />

edited Jan 30, 2020 at 12:48

LostMyGlasses

3,16423 silver badges29 bronze badges

answered Mar 5, 2014 at 8:06

Dustin Cook

1,3055 gold badges26 silver badges45 bronze badges

Comments

pixelearth · Accepted Answer · 2020-07-13 18:53:39Z

0

I think you can do this now:

hr {
  all: reset;
}

answered Jul 13, 2020 at 18:53

pixelearth

14.8k13 gold badges72 silver badges122 bronze badges

1 Comment

kungfooman Over a year ago

Best answer, and I guess you mean all: revert?

Collectives™ on Stack Overflow

How to avoid CSS styles to be applied for particular element

10 Answers 10

5 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related