CODEWITHSUNDEEP
htmlcss
user3191903
user3191903

Reputation: 245

How to avoid CSS styles to be applied for particular element

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?

Upvotes: 3

Views: 16159

Answers (10)

pixelearth
pixelearth

Reputation: 14610

I think you can do this now:

hr {
  all: reset;
}

Upvotes: 0

Dustin Cook
Dustin Cook

Reputation: 1305

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

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

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

Upvotes: 0

Jakub Vr&#225;na
Jakub Vr&#225;na

Reputation: 684

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

Upvotes: 1

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

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

Upvotes: 3

Mathias
Mathias

Reputation: 5672

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.

Upvotes: 1

Sbpro
Sbpro

Reputation: 988

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.

Upvotes: 0

Anusha kurra
Anusha kurra

Reputation: 480

at the end of your tag override with !important

example

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

this will overide with your changes

Upvotes: 0

Julien
Julien

Reputation: 3529

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)

Upvotes: 1

MarcelB.
MarcelB.

Reputation: 21

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

Upvotes: 1

Pat Dobson
Pat Dobson

Reputation: 3299

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; }

Upvotes: 1

Related Questions